Создайте заголовок + текстовый компонент с html и css

Question

Я хочу создать component для angular, который состоит из метки и текста.

Отображается должно выглядеть так:

Name John

или

Name
John

или

John Name

или

John
Name

Будет параметризован, т.е. одним из параметров будет выравнивание метки (вверху, слева, справа, снизу)

Это не проблема в создании метки + текста, например:

<p>Name:<span>John</span></p>

Но как сделать это как можно более общим, используя выравнивание. Мне нужно несколько советов, как начать. Возможно ли это, или я должен сделать каждый случай отдельно?

возможная начальная точка:

<div>
    <div class="label">Name</div>
    <div class="text">John</div>
</div>


div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

Выравнивание может контролироваться изменением: столбец / строка, но также следует изменить Flex-Start на Flex -конец. Я не знаю, хорошо ли это или есть другой путь. Трудно предсказать будущие проблемы. Именно поэтому я хочу спросить кого-то, кто имел опыт работы с css и html.

https://repl.it/repls/EsteemedLatestExtraction