横並びに表示させたいときは「display: flex」を使用する

<div>タグで要素を作ると次の改行されてしまう...

<div>あいうえお</div>

<div>かきくけこ</div>

「display: flex」を親要素に設定することで、横並びにすることが出来る。

<style>
.display-flex {
    display: flex;
}
</style>

<div class="display-flex">

     <div>あいうえお</div>

     <div>かきくけこ</div>

</div>

「display: flex」を使って、中央に配置したい場合は「justify-content: center」を一緒に使用する。

<style>
.display-flex-center {
    background-color: red;
    width: 500px;
    display: flex;
    justify-content: center;
}
</style>

<div class="display-flex-center">

     <div>あいうえお</div>

     <div>かきくけこ</div>

</div>