How to achieve this design with flexbox?

Question

#timer-head .wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); }
  #timer-head .wrapper .title {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    display: flex;
    align-items: center;
    justify-content: center; }
    
  #timer-head .wrapper .timer {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2; }
    
     #timer-head .wrapper .image {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3; }
    
     #timer-head .wrapper .image p{
     background: red;
     padding: 100px;
     }

<section id="timer-head">
    <div class="wrapper">
        <div class="title">Title</div>
        <div class="timer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quae dolor rem ipsam sint voluptate accusantium vitae dolorum, quidem eveniet.
        </div>
        <div class="image"><p>Image</p></div>
    </div>  
</section>

I actually achieved this with CSS Grid, but don't know how to do it with flexbox. Can anyone help? The reason why I want it to do in flex also, because IE 11 support.

Could you please check if this is similar to what you wanted? Check the first answer https://stackoverflow.com/questions/37039029/how-to-use-flex-css-and-simulate-a-rowspan-2-and-colspan-2 — keidakida, Aug 11 '20 at 07:29
example going along with previous comment : https://jsbin.com/suhisonune/1/edit?html,css,output and the flex option without touching HTML : https://jsbin.com/zukomikojo/1/edit?html,css,output which needs to rewrite the structure to b fuly working (answers below) — G-Cyrillus, Aug 11 '20 at 08:48

score 2 · Accepted Answer · answered Aug 11 '20 at 07:44

Building on @ThibautM's answer, i added flex: 1 to the two child elements to give them equal width, just as you have it in the screenshot.

#timer-head {
  display: flex;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.title, .timer {
  text-align: center;
  padding: 10px;
  margin: 5px;
  background-color: red;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: blue;
  margin: 5px;
flex: 1;
}

<section id="timer-head">
    <div class="wrapper">
        <div class="title">Title</div>
        <div class="timer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quae dolor rem ipsam sint voluptate accusantium vitae dolorum, quidem eveniet.
        </div>
    </div>  
        <div class="image"><p>Image</p></div>
</section>

ah we answered at the same time i guess, also a good solution to make it responsive, probably better than mine for this case cause its way easier — Warden330, Aug 11 '20 at 07:52

score 1 · Answer 2 · answered Aug 11 '20 at 07:36

I have made a few changes in your HTML code to make it work.

#timer-head {
  display: flex;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.title, .timer {
  text-align: center;
  padding: 10px;
  margin: 5px;
  background-color: red;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: blue;
  margin: 5px;
}

<section id="timer-head">
    <div class="wrapper">
        <div class="title">Title</div>
        <div class="timer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quae dolor rem ipsam sint voluptate accusantium vitae dolorum, quidem eveniet.
        </div>
    </div>  
        <div class="image"><p>Image</p></div>
</section>

score 1 · Answer 3 · answered Aug 11 '20 at 07:49

I would do it like this, difference to the other answer is that in this version it is responsive(if you drag it smaller in IE11), both answers solve your problem, just wanted to give you the alternative.

#timer-head{
                max-width: 100vw;
                max-height: 10vh;
            }
            .wrapper{
                max-width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
            }
            .wrapper-column{
                width: 49%;
                display: flex;
                flex-flow: column nowrap;
                height: 100%;
            }
            .wrapper-column div {
                display: flex;
                background: #1E95EA;
                width: 100%;
                justify-content: center;
                align-items: center;
                margin: 1px;
                height: 50px;
            }
            .image{
                display: flex;
                width: 50%;
                background: #1E95EA;
                justify-content: center;
                align-items: center;
            }

<section id="timer-head">
    <div class="wrapper">
        <div class="wrapper-column">
            <div class="title">Title</div>
            <div class="timer">
                Timer
            </div>
        </div>
        <div class="image"><p>Image</p></div>
    </div>
</section>

check @Seun Adekunles answer, its less complicated and does basically the same (wrote my answer while he answered so i didnt see it before i posted) — Warden330, Aug 11 '20 at 07:57

How to achieve this design with flexbox?

3 Answers3