<div class="flex-container">
<div class="flex-item">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas molestias ea, corrupti rerum fuga similique iure esse at fugit, iusto doloribus, adipisci nam eius quisquam!</p>
</div>
<div class="flex-item flex-item-2">
<p>2</p>
</div>
</div>
<div class="flex-container">
<div class="flex-item">
<p>Lorem!</p>
</div>
<div class="flex-item flex-item-2">
<p>2</p>
</div>
</div>
* {
box-sizing: border-box;
}
.flex-item-2 {
width: 50%;
}
/* styling purposes */
.flex-container {
padding: 1em;
display: flex;
width: 80%;
max-width: 400px;
margin: 0 auto;
background: lightblue;
border: 5px solid steelblue;
margin-bottom: 1em;
}
.flex-item {
padding: 1em;
background: pink;
border: 5px solid red;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.