Преобразование кода в flexbox .. align two divs

Question

У меня есть код, который производит это, но я бы хотел использовать Flexbox, поскольку мой текущий код довольно грязный. Как мне это сделать?

.container { 
 
    background: red; 
 
    padding: 10px; 
 
} 
 

 
.container2 { 
 
    background: green; 
 
    padding: 10px; 
 
} 
 

 
.left { 
 
    float: left; 
 
    padding: 10px; 
 
    padding-top: 0px; 
 
    width: 48%; 
 
    background: #fff; 
 
} 
 

 
.right { 
 
    float: right; 
 
    padding: 10px; 
 
    padding-top: 0px; 
 
    width: 40%; 
 
    background: #fff; 
 
} 
 

 
.red { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="container2"> 
 
    <div class="left"> 
 
     <p>Hello</p> 
 
    </div> 
 
    <div class="right"> 
 
     <p>Hello</p> 
 
    </div> 
 
    <div style="clear: both;"> 
 
    </div> 
 
    <button class="red"> 
 
    </div> 
 
</div>

JsFiddle: https://jsfiddle.net/19e8nmr3/

Answer 1

Вы можете обернуть p элементы в один родительский элемент и использовать flex: 1.

.container { 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.container2 { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: green; 
 
} 
 
.wrap { 
 
    display: flex; 
 
} 
 
.wrap p, 
 
button { 
 
    padding: 10px; 
 
    background: #fff; 
 
    flex: 1; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <div class="container2"> 
 
    <div class="wrap"> 
 
     <p>Hello</p> 
 
     <p>Hello</p> 
 
    </div> 
 
    <button class="red">Button</button> 
 
    </div> 
 
</div>