выравнивание текста, перенос блоков

Question

у меня есть следующий html

<p>
    <div class="class">
  <div class="green_fon first">
    <span class="line word">Мама</span>
    <span class="double_line word">помыла</span>
    <span class="wavy_line word">грязную</span>
    <span class="dotted_line word">раму</span>
    <span class="False">,</span>
    <span class="dotted_line word">облитую</span>
    <span class="dotted_line word">жижей</span>
    <span class="False">.</span>
  </div>
  <div class="green_fon first">
    <span class="dash_dotted_line word">Наконец</span>
    <span class="line word">она</span>
    <span class="double_line word">догадалась</span>
    <span class="False">,</span>
    <div class="blue_fon">
      <span class="word">что</span>
    </div>
    <span class="line word">это</span>
    <span class="double_line word">был</span>
    <span class="wavy_line word">ее</span>
    <span class="double_line word">сын</span>
    <span class="False">.</span>
  </div>
  <div class="green_fon first">
    <div class="blue_fon">
      <span class="word">Но</span>
    </div>
    <span class="dash_dotted_line word">тут</span>
    <span class="dotted_line word">ее</span>
    <span class="double_line word">осенило</span>
    <span class="False">!</span>
  </div>
  <div class="green_fon first">
    <div class="blue_fon">
      <span class="word">Что</span>
    </div>
    <div class="blue_fon">
      <span class="word">если</span>
    </div>
    <span class="line word">это</span>
    <span class="double_line word">был</span>
    <span class="line word">дядя</span>
    <span class="dotted_line word">Вова</span>
    <span class="False">?</span>
  </div>
  <div class="green_fon first">
    <span class="line word">Она</span>
    <span class="double_line word">вскочила</span>
    <div class="blue_fon">
      <span class="word">с</span>
    </div>
    <span class="dotted_line word">кровати</span>
    <div class="blue_fon">
      <span class="word">и</span>
    </div>
    <span class="double_line word">бросилась</span>
    <span class="dash_dotted_line word">вдогонку</span>
    <div class="blue_fon">
      <span class="word">за</span>
    </div>
    <span class="dotted_line word">ним</span>
    <span class="False">.</span>
  </div>
</div>
</p>

сss с 'фонами':

.blue_fon{ /* div */
  display: inline-block;
  background: #48cae2;
  font-size: 17px;
  border-top: 4px solid #001f3f;
  border-radius: 8px;
  display: flex;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

  margin: 5px;
}

.green_fon{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 17px;
  border-top: 4px solid #001f3f;
  border-radius: 8px;
  display: flex;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

  margin: 5px;

}

.first{
  display: flex;
  justify-content: start-end;

}

.class{
  display: flex;
  justify-content: flex-start;

  border: 1px solid #7d7d7d;
  border-top: 4px solid #001f3f;
  border-radius: 8px;

  background: #e4e4e4;
}

и css c для подчеркивания текста (в качестве линий используются картинки фона, прикладывать их не буду, они тут не нужны):

.word {
    margin-left: 6px;
}
.dash_dotted_line {
    background: url(../img/dash_dotted_line.png) repeat-x bottom;
    background-image: url(../img/dash_dotted_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.double_line {
    background: url(../img/double_line.png) repeat-x bottom;
    background-image: url(../img/double_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.wavy_line {
    background: url(../img/wavy_line.png) repeat-x bottom;
    background-image: url(../img/wavy_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.line {
    background: url(../img/line.png) repeat-x bottom;
    background-image: url(../img/line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.dotted_line {
    background: url(../img/dotted_line.png) repeat-x bottom;
    background-image: url(../img/dotted_line.png);
    background-position-x: center;
    background-position-y: bottom;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.without_line {

}

Пытаюсь выровнять текст во всех блоках, никак не получается добиться одной линии текста.
Если добавить блоков, то они не будут переносится, подскажите в какую сторону гуглить. (немного исправил код, но оба вопроса так и не решил, тут наверное надо что-то сделать с displey у старшего div, но я не понимаю)

Answer 1

По первому пункту:

.first {
   display: flex;
   align-items: center;
}

По второму пункту добавить:

 .class {
    flex-wrap: wrap;
 }

БЛОГ НА HUSL

выравнивание текста, перенос блоков

Ответы (1 шт):