Beware `float: left`… 🤔

…there are many ways to align elements side-by-side.

Below are the most common ways to achieve two elements side-by-side…

Some basic css styles for parent and child elements in these examples:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)

html

<div class="parent">
  <div class="child float-left-child">A</div>
  <div class="child float-left-child">B</div>
</div>

css

.float-left-child {
  float: left;
}

html

<div class="parent">
  <div class="child inline-block-child">A</div>
  <div class="child inline-block-child">B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

Note: the space between these two child elements can be removed, by removing the space between the div tags:

html

<div class="parent">
  <div class="child inline-block-child">A</div><div class="child inline-block-child">B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

html

<div class="parent flex-parent">
  <div class="child flex-child">A</div>
  <div class="child flex-child">B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

html

<div class="parent inline-flex-parent">
  <div class="child">A</div>
  <div class="child">B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

html

<div class="parent grid-parent">
  <div class="child">A</div>
  <div class="child">B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}