Выровнять блоки div по высоте

Question

имеется html:

<div class="class">
    <div class="green_fon">
        привет андрей
        <div class="blue_fon">внутри андр</div>
    </div>
    <div class="green_fon2">
        привет паша
    </div>
</div>

так же есть css:

.green_fon{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 15px;
  border-top: 5px solid #001f3f;

  margin-left: 1;
  margin-right: 1;
  margin-top: 5px;
  margin-bottom: 5px;

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

}
.blue_fon{ /* div */
  display: inline-block;
  background: #48cae2;
  font-size: 15px;
  border-top: 5px solid #001f3f;

  margin-left: 1;
  margin-right: 1;
  margin-top: 4px;
  margin-bottom: 4px;

  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.green_fon2{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 15px;
  border-top: 5px solid #001f3f;

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

  margin-left: 1;
  margin-right: 1;
  margin-top: 5px;
  margin-bottom: 5px;

}
.class{
  box-sizing: border-box;
  border: 1px solid red;
  justify-content: space-between;
}

Не могу сделать так, чтобы эти два 'зеленых' были одинаковый высоты и выровнены. желательно добиться так, чтобы они были одного класса, но это не принципиально. снаружи висит вспомогательный div, я пробовал растянуть divы внутри до его границ.

Answer 1

Воспользуйся flexbox'ом,

.class{
display: flex;
justify-content: space-between;
}

после этого элементы станут в одну линию. затем.. удалите margin везде, у вас будет что-то типа

[1]: https://i.stack.imgur.com/RLJpw.png

затем напишите в хтмл вместо class="green_fon" => class="green_fon first" а второй класс class="green_fon2" станет таким => class="green_fon" в css добавьте:

.first{
display: flex;
justify-content: start-end;
margin-right: 10px;
}

Например, так

БЛОГ НА HUSL

Выровнять блоки div по высоте

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