Некоторые вопросы о позиции в html

Question

Как можно было бы сделать что-то подобное с этим с чистым html / css, поместив два слова onde под другим рядом с большим словом? (я знаю, что это возможно с системой сетки boostrap, но я хочу знать с чистым html), кроме того, делать это и иметь возможность свободно перемещать три слова вниз или вверх?

кроме того, как бы это сделать получить элементы go внутри друг друга? (потому что у некоторых шрифтов есть большие границы, и тогда вы не можете сделать другие слова близко друг к другу из-за этой границы)

Answer 1

Вы можете сделать это с несколькими div и flexbox и инкапсулировать их в контейнер div. Я также добавил align-items: center;, чтобы они оставались по центру бок о бок. Посмотрите, что я здесь сделал:

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

.bigword {
  font-size: 80px;
}

<div class="container">
  <div class="smallcontainer">
    <div class="smallword">Small1</div>
    <div class="smallword">Small2</div>
  </div>
<div class="bigword">BigWord</div>
</div>