-1

I have an HTML markup structure like so:

<div class="container>
     <div id="one"></div>
     <div id="two"></div>
     <div id="three"></div>
</div>

I am trying to shape this markup into display flex row. Where div one takes up half the line width and the remaining divs take the other half of the line width but are stacked on top of each other in the same line as div one.

I realize that I should probably wrap div 2 and 3 in a div and then execute the design I am seeking. I am just wondering if it is possible to do so without wrapping div 2 and 3 in another div.

Thanks!

martinpsz
  • 117
  • 3
  • 14
  • 1
    *"... but are stacked on top of each other in the same line as div one."* You lost me there....? – zer00ne Dec 11 '17 at 09:00
  • An illustration would help clear the confusion in question. "... but are stacked on top of each other in the same line as div one." – omukiguy Dec 11 '17 at 09:09

1 Answers1

0

You will have to wrap them with another div, a quick example for it will be giving your container: .container { display: flex; flex-direction: row; }

Then, you make a wrapper for both two and three, and giving him:
.wrapper { display: flex; flex-direction: column; }

That's the most basic thing, you will need to modify other things of course.

Idanushka
  • 340
  • 2
  • 10