<div class="layout is-flex has-islands">
  <div class="layout__container layout--half">
    <div class="island">
      <h2>Island 1</h2>
      <div class="section">
        <div class="column--1-of-2">
        <h2>50%</h2>
          <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
        </div>
        <div class="column--1-of-2">
          <h2>50%</h2>
          <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="layout__container layout--half">
    <div class="island">
      <h2>Island 2</h2>
    </div>
    <div class="island">
      <h2>Island 3</h2>
      <p>Here comes more text</p>
      <p>Here comes more text</p>
      <p>Here comes more text</p>
      <p>Here comes more text</p>
      <p>Here comes more text</p>
    </div>
  </div>

  <div class="island">
    <h2>Island 4</h2>
    <div class="section">
      <div class="column--1-of-3">
        <h2>30%</h2>
        <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
      </div>
      <div class="column--1-of-3">
        <h2>30%</h2>
        <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
      </div>
      <div class="column--1-of-3">
        <h2>30%</h2>
        <p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
      </div>
    </div>
  </div>
</div>