.flexbox is a best way to horizontally align two or several items in a same line instead of floating them. It can hugely help you to align your content.

It has worth to know that flexbox is a shorthand class for .d-flex class. Flexbox will add a gap between your items and add justify-content: space-between property by default. You can easily create the following samples using .d-flex and other utility classes. See the official Bootstrap documentation for more information.

Left only 
<div class="flexbox">
  <span>Left</span>
</div>
Right only 
<div class="flexbox flex-row-reverse">
  <span>Right only</span>
</div>
Left Right 
<div class="flexbox">
  <span>Left</span>
  <span>Right</span>
</div>
Left Center Right 
<div class="flexbox">
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</div>
Left wide Center Right 
<div class="flexbox">
  <span class="flex-grow">Left wide</span>
  <span>Center</span>
  <span>Right</span>
</div>
Left Center wide Right 
<div class="flexbox">
  <span>Left</span>
  <span class="flex-grow">Center wide</span>
  <span>Right</span>
</div>
Left Center Right wide 
<div class="flexbox">
  <span>Left</span>
  <span>Center</span>
  <span class="flex-grow">Right wide</span>
</div>
Equal Equal Equal 
<div class="flexbox flex-justified">
  <span>Left wide</span>
  <span>Center wide</span>
  <span>Right wide</span>
</div>
Equal Equal Equal Equal 
<div class="flexbox flex-justified">
  <span>Equal</span>
  <span>Equal</span>
  <span>Equal</span>
  <span>Equal</span>
</div>
Equal Equal Equal Equal Equal 
<div class="flexbox flex-justified">
  <span>Equal</span>
  <span>Equal</span>
  <span>Equal</span>
  <span>Equal</span>
  <span>Equal</span>
</div>
No gutters

Remove 8px gap by adding .no-gutters to .flexbox

Left wide Center wide Right wide 
<div class="flexbox flex-justified no-gutters">
  <span>Left wide</span>
  <span>Center wide</span>
  <span>Right wide</span>
</div>
Grow more

You have utility classes for flex-grow property, values from 0 to 9.

Left wide Center wide Right wide 
<div class="flexbox flex-justified">
  <span>Left wide</span>
  <span class="flex-grow-2">Center wide</span>
  <span>Right wide</span>
</div>