display: flex;

これで子要素が横並びになります

flex-direction

方向や向きを指定します
flex-direction: row;
初期値
flex-direction: column;
縦並びになります
flex-direction: column-reverse;
縦並びで順番が逆になります
flex-direction: row-reverse;
横並びで順番が逆になります

justify-content

主軸に沿って間隔を指定します
justify-content: start;
初期値
justify-content: space-between;
均等に広がります
justify-content: space-around;
余白を合わせて均等に広がります
justify-content: center;
中央に寄ります

align-items

交差軸に沿って間隔を指定します
align-items: start;
交差軸の始まりの位置に揃います
align-items: center;
交差軸の真ん中に揃います
align-items: end;
交差軸の終わりの位置に揃います