<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.