CSSでブロック要素を横並びにしたい

Question

前提・実現したいこと

wordpressで投稿一覧ページを作っています。
一つの記事に対して

• 投稿日時
• タイトル
• カテゴリー

を横並びにして表示したいのですが、タイトルが長い時に投稿日時の下に回りこむのを修正できません。
タイトルが長く二行になってしまうときは、タイトル一行目の下から二行目を開始させたいです。

該当のソースコード

<div class="article">
  <span class="date">2019-7-3</span>
  <span class="title">hogehogehoge</span>
  <span class="catocory">cate</span>
</div>

.title {
display: inline-block;
}
.category {
float: right;
}

試したこと

上記の通りインラインブロックにすることで解決できると思いましたが無理でした。

Answer 1

.article{
display: flex;
}

まず上のようにdisplay: flex;
は親要素に設定します。

続いて、タイトルが長いときに下行に回り込ませるには、
子要素にfloatを設定する必要はありません。
全てブロック扱いにし、横幅を設定す必要はありません。イメージしやすくするために、背景に色をつけています。

.article{
  display: flex;
  width: 100vw;
}
.date{
  display: block;
  height: 15px;
  font-size: 12px;
  line-height: 15px;
  color: white;
  background-color: red;
}
.title{
  display: block;
  height: 15px;
  font-size: 12px;
  line-height: 15px;
  color: white;
  background-color: green;
}
/*The next class name isn't category?*/
.catocory{
  height: 15px;
  font-size: 12px;
  line-height: 15px;
  color: white;
  background-color: blue;
}

Answer 2

答えを教えるのは簡単ですが、やり方を教えるので頑張って自分で実装してください。
titleクラス内に3つの要素を追加してください。

1. inlin-blockは横幅を決めないと中身の要素に合わせて伸びていくので幅を決める。

2. 文字列の折り返しをする。

3. 下寄せになってしまうので上寄せにする。

Answer 3

インラインブロックではなく、フレキシブルボックスを使用されてはいかがでしょうか？