I'm struggling to grasp the concept of the flex model. In this scenario, I want the elements in the first row (first and second) to be displayed side by side: The first element at 200px width and the second element taking up the remaining space.
.wrapper {
display: flex;
width: 100%;
}
.first {
width: 200px;
background: red;
}
.second {
flex: 1;
background: blue;
}
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
</div>Now, my challenge is adding a third element that should appear below the second element with the same width as the second element. It should not take up the full width of the page, but only sit below the second element.
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
<div class="third">second</div>
</div>