Split

Use the split layout when you need to place items on the opposite end of a parent container.

Class .wb-l-split

Any direct children of .wb-l-split are placed as far apart as possible. If the items have the same height, they can be placed without any wrapping <div>.

<div class='wb-l-split'>
  <button class='wb-button'>Prev</button>
  <button class='wb-button wb-button--primary'>Next</button>
</div>

However, if the items have different heights, they should be wrapped within a <div> to prevent flexbox from making the the items equal height.

<div class='wb-l-split'>
  <div>
    <img src='assets/papel/avatar.png' width='100' />
  </div>
  <div>
     <button class='wb-button'>Bye Papel</button>
     <button class='wb-button wb-button--primary'>Hi Papel</button>
  </div>
</div>

Modifier .wb-l-split--center

Use .wb-l-split--center to vertically center the items.

<div class='wb-l-split wb-l-split--center'>
  <div>
    <img src='assets/papel/avatar.png' width='100' />
  </div>
  <div>
     <button class='wb-button'>Bye Papel</button>
     <button class='wb-button wb-button--primary'>Hi Papel</button>
  </div>
</div>