1.要素を横並びにして、テキストを要素の下に配置したい。２．テキストの文字の大きさを６pxにしたい。

Question

inline-blockを使用して要素を横並びにする事ができたのですが、ｐタグでテキストを追加したところ、縦並びになってしまいました。
テキストの大きさを10px以下にして表示させる方法も試してみたのですがうまくいきません。
どなたかご享受いただけますでしょうか？

<div class="flow-text">
        <h2>ブライダルエステ体験の流れ</h2>
        <div class="flow-list">
          <div class="fix">Step１<br>ｶｳﾝｾﾘﾝｸﾞ</div>
          <p>一対一のカウンセリングで<br>お客様のお肌や体調などの<br>状態をうかがいます。<br>また、フェイシャルエステに<br>関する質問や施術内容など、<br>お客様がご納得して
            いただくまで<br>スタッフが丁寧にご説明いたします。
          </p>
          <div class="fix">Step２<br>洗顔</div>
          <p>エステティシャンが正しい洗顔の仕方を<br>アドバイスしながらご自身で洗顔を行って<br>いただきます。</p>
          <div class="fix">Step３<br>ｵｲﾙﾄﾘｰﾄﾒﾝﾄ</div>
          <p>リンパに沿ってお顔からデコルテに<br>掛けて丁寧にほぐしていきます。<br>リンパとコリを丁寧に揉みほぐし。<br>流れをスムーズにして清らかな肌へと<br>導きます。</p>
          <div class="fix">Step４<br>パック</div>
          <p>水分を補給し、お肌の鎮静とキメを<br>整えます。</p>
          <div class="fix">Step５<br>仕上げ</div>
          <p>パック後はお肌にあわせたローションと<br>クリームを塗布。<br>潤いのあるお肌を保ちます。</p>
          <div class="fix">Step６<br>お色直し</div>
          <p>施術後のお肌の状態を確認しながら<br>お化粧のノリを体験していただきます。</p>
          <div class="fix">Step７<br>ｶｳﾝｾﾘﾝｸﾞ</div>
          <p>ハーブティーを飲みながらゆったりと<br>施術後のカウンセリングを行います。<br>また、体験初回のお客様には次回日を<br>お伺いいたします。</p>
        </div>
      </div>

コードhtml body .flow-list {
  overflow: hidden;
  max-width: 125%;
  text-align: center;
}

html body .flow-list .fix {
  background: #fefff2;
  display: inline-block;
  padding: 10px;
  width: 90px;
  height: 100px;
  vertical-align: middle;
  border: 1px solid rgba(54, 54, 54, 0.5);
  line-height: 2.5;
  border-radius: 8%;
  color: #707070;
  font-size: 18px;
}

html body .flow-list p {
  display: block;
  transform: scale(0.6);
  transform-origin: left center;
  font-size: 10px;
  color: #707070;
  opacity: 0.8;
}

Answer 1

      <div class="flow-text">
        <h2>ブライダルエステ体験の流れ</h2>
        <div class="flow-list">
          <ul>
            <li>
                 <div class="box">Step１<br>ｶｳﾝｾﾘﾝｸﾞ</div>
                 <p class="box-p">一対一のカウンセリングで<br>お客様のお肌や体調などの<br>状態をうかがいます。<br>また、フェイシャルエステに<br>関する質問や施術内容など、<br>お客様がご納得していただくまで<br>スタッフが丁寧にご説明いたします。
                 </p>
            </li>
            <li> 
                 <div class="box">Step２<br>洗顔</div>
                 <p class="box-p">エステティシャンが正しい洗顔の仕方を<br>アドバイスしながらご自身で洗顔を行って<br>いただきます。</p>
            </li>
            <li>
                 <div class="box">Step３<br>ｵｲﾙﾄﾘｰﾄﾒﾝﾄ</div>
                 <p class="box-p">リンパに沿ってお顔からデコルテに<br>掛けて丁寧にほぐしていきます。<br>リンパとコリを丁寧に揉みほぐし。<br>流れをスムーズにして清らかな肌へと<br>導きます。</p>
            </li>
            <li>
                 <div class="box">Step４<br>パック</div>
                 <p class="box-p">水分を補給し、お肌の鎮静とキメを<br>整えます。</p>
            </li>
            <li>
                 <div class="box">Step５<br>仕上げ</div>
                 <p class="box-p">パック後はお肌にあわせたローションと<br>クリームを塗布。<br>潤いのあるお肌を保ちます。</p>
            </li>
            <li>
                 <div class="box">Step６<br>お色直し</div>
                 <p class="box-p">施術後のお肌の状態を確認しながら<br>お化粧のノリを体験していただきます。</p>
            </li>
            <li>
                 <div class="box">Step７<br>ｶｳﾝｾﾘﾝｸﾞ</div>
                 <p class="box-p">ハーブティーを飲みながらゆったりと<br>施術後のカウンセリングを行います。<br>また、体験初回のお客様には次回日を<br>お伺いいたします。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    .flow-list {  
      max-width: 125%;
      text-align: center;
      ul {
        display: flex;
        list-style: none;
      .box {
        background: rgb(254, 255, 242);
        padding: 10px;
        width: 90px;
        height: 100px;
        vertical-align: middle;
        border: 1px solid rgba(54, 54, 54, 0.5);
        line-height: 2.5;
        border-radius: 8%;
        color: $color1;
        font-size: 18px;
      }
      .box-p {
        display: block;
        transform: scale(0.8);
        font-size: 10px;
        color: $color1;
        opacity: 0.8;
        padding-right: 10px ;
      }
    }
  }