<div class="example example01">
  <div class="container">
    <div class="box normal">
      <h2>are you sure you want this? (normal)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, fugit. Fuga voluptatem adipisci nostrum accusantium et quis maxime libero non vero. Quasi reiciendis ipsa dolore odit. Dicta, aut temporibus? Numquam?</p>
    </div>
    <div class="box balance">
      <h2>are you sure you want this? (balance)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, fugit. Fuga voluptatem adipisci nostrum accusantium et quis maxime libero non vero. Quasi reiciendis ipsa dolore odit. Dicta, aut temporibus? Numquam?</p>
    </div>
    <div class="box pretty">
      <h2>are you sure you want this? (pretty)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, fugit. Fuga voluptatem adipisci nostrum accusantium et quis maxime libero non vero. Quasi reiciendis ipsa dolore odit. Dicta, aut temporibus? Numquam?</p>
    </div>
  </div>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  font-family: "Open Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
}

.container {
  inline-size: 90vw;
  margin-inline: auto;
  display: flex;
  flex-flow: row wrap;
  gap: 5vw;
}

.box {
  inline-size: 35ch;
}

.balance {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}