『いまさら感』がありますが、HTMLの要素を横に並べる方法、その手法のパターンを紹介します。
ある程度、HTMLとCSSに慣れてくると当たり前のことと思いますが、初めて触る人にとっては自由にレイアウトを組めるようになるまでの最初の関門になるかもしれません。

テーブルを使って横並びにする

これはかなり古い手法ですが、CSSを使わず、HTMLだけで横並びにすることが出来るので、一番簡単です。

<table>
    <tr>
        <td>左側コンテンツ</td>
        <td>右側コンテンツ</td>
    </tr>
</table>

テーブル要素の良い所は内部コンテンツの文字数に応じて、左右のバランスが勝手に調整される所ですよね。
しかも、CSSのメディアクエリを使うことで、簡単にレスポンシブに対応できます。

table th,
table td {
    display: table-cell; // 通常時はtable-cellによって、横並びに
}

@media screen and (max-width: 768px) {
    table th,
    table td {
        display: block; // 画面幅が768px以下の時、block要素に切り替わり、縦並びになる
    }
}

通常はtable-cellにしておいて、横並びになっているのが、画面幅が狭くなった時に、ブロック要素になることで、要素が縦に並ぶというわけです。

インライン要素とブロック要素とは

「ブロック要素だから～～」って言われてもわからないという方には、まずHTMLの要素には大きく分けて、ブロック要素とインライン要素があります。
古くは、タグの種類によって、ブロック要素とインライン要素が決まっていたのですが、今はそれぞれ自由に変えることができます。

インライン要素とブロック要素の違い

他にもインライン要素とブロック要素の良いとこ取りしたinline-blockという物があったりします。
要素を横並びに配置する時に、この要素の特徴をつかんでおくことが非常に大切です。

floatを使って横に並べる

次に使われていたのが、float: left;を使って横並びにする方法です。
floatは回り込みをさせるスタイルなのですが、float同士が隣り合ってる時は横並びになります。

<div class="left">
</div>
<div class="left">
</div>
<div class="clear"></div>

.left {
    float: left;
}
.clear {
    clear: both;
}

この方法ではfloatの後ろに来る要素が回り込みしてしまうので、最後にclear: both;を使って、回り込みを解除してやる必要があり、回り込みが思った通りの動きにならないこともあり、微調整が少々面倒でした。

インラインブロックを使って並べる

次にインラインブロックを使う方法が使われるようになりました。
インラインブロックはインライン要素とブロック要素の特徴を持つ形式です。
ブロックのようにmarginやpaddingは効くけど、横幅はコンテンツ幅に合わせられ、要素は横に並びます。

<ul class="menu">
    <li><a href="#">メニュー01</a></li>
    <li><a href="#">メニュー02</a></li>
    <li><a href="#">メニュー03</a></li>
    <li><a href="#">メニュー04</a></li>
</ul>

ul.menu > li {
    display: inline-block;
}

上記のサンプルでは、要素が横並びに整列しますが、各要素の横幅は内部コンテンツに依存します。
全ての要素の横幅を足して100%に満たなければ、右端に余白が生まれてしまいます。
そこで、右側に余白を残さない方法も開発されました。

<ul class="menu">
    <li><a href="#">メニュー01</a></li>
    <li><a href="#">メニュー02</a></li>
    <li><a href="#">メニュー03</a></li>
    <li><a href="#">メニュー04</a></li>
</ul>

ul.menu {
    display: block;
    padding: 0px;
    font-size: 0px;

    > li {
        display: inline-block;
        margin: 0px;
        width: 25%;
        font-size: 1rem;
    }
}

このように、inline-blockの横幅を25%など指定して、合計が100%になるように設定すれば、右端に余白が生まれなくなります。
font-size: 0px;は文字サイズが存在すると、若干謎の隙間が生まれて、上手に100%にならないためです。

inline-blockによる横並びはfloatのようにリセットする必要もなく、divタグでもulタグでもspanタグでも同じように作れるため、セマンティックなコーディングが出来て、結構長いこと人気の横並び方法でした。

flex-boxで横並びにする

こちらは最近の流行りですが、flex-boxやgridが使われるようになりました。

<ul class="menu">
    <li><a href="#">メニュー01</a></li>
    <li><a href="#">メニュー02</a></li>
    <li><a href="#">メニュー03</a></li>
    <li><a href="#">メニュー04</a></li>
</ul>

.menu {
    display: flex;
    flex-direction: row;

    > * {
        flex: 1;
    }
}

親要素をflex要素にして、flex-direction: row;を指定するだけで、横に並んでくれます。
すごく簡単です。
子要素にflex: 1;を指定しておくと、各子要素が同じ幅になります。

また、flexで片方は固定幅、片方は可変幅で作る場合は以下のように作ります。

<div class="input-group">
    <label>お名前</label>
    <input type="text" class="name">
</div>

.input-group {
    display: flex;
    flex-direction: row;

    > label {
        display: block;
        width: 240px;
    }
    > input[type^=text] {
        display: block;
        flex: 1;
    }
}

このように、片方にはwidthを指定、片方にはflex: 1;を指定することで、flex: 1;を指定した方が幅に合わせて伸縮するようになります。