CSS

display要素

.contents { 
  display: block;           /* 指定された要素はブロックレベル要素として表示されます */
  display: inline;          /* 指定された要素はインライン要素として表示されます */
  display: inline-block;    /* 指定された要素はインライン要素とブロックレベル要素の特性を併せ持ちます */
  display: flex;            /* 指定された要素の子要素は横並びになる */
  display: none;            /* 指定された要素は非表示になる */
}

要素を横並びにしたい場合

/* 親要素に display: flex; を指定すると子要素が横並びになる */

.contents {           
  display: flex
}

.content {
}

横並びにした要素の横の配置を調整

/* 親要素に display: flex; と justify-content を指定する */

.contents {           
  display: flex;
  justify-content: space-around;
}

.content {
}