<div class="father">
  <div class="item">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, repudiandae. Officia minima mollitia maiores error fuga totam est, expedita perferendis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, eos tenetur tempore totam porro maiores animi blanditiis quam vitae expedita eum provident non inventore? Reprehenderit quasi quaerat molestias veniam itaque magni dolorum ipsam ab, molestiae amet, sit velit voluptate? Temporibus.
  </div>
</div>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.father {
  width: 300px;
  margin: 100px auto;
  outline: 2px solid #000;
  display: flex;
}
.father .item {
  width: 0px;
  flex-grow: 1;
  padding: 5px 10px;
}
.father .item:first-child {
  background-color: #ff0;
}
.father .item:last-child {
  background-color: #f00;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.