Use the split layout when you need to place items on the opposite end of a parent container.
.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>
.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>