Как лучше сверстать такие вкладки?

Question

[smolPotat]

Доброго времени суток.
Изучаю фронт-энд где-то около месяца, возникла надобность сверстать нечто подобное:

Блок должен состоять из двух вкладок, сменяющих друг друга, с переключением, размещенным под вкладками.
Собственно, проблема возникла именно с размещением. Я знаю, как реализовать такой блок с переключением между вкладками, когда оно сверху, но вот как опустить его вниз, я не понимаю и все мои потуги решить эту задачу не возымели успеха.



Подскажите, как бы вы это сверстали?
Буду признательна за помощь.

Comments

[Максим Морев]

Покажите то, что у вас уже получилось - залейте на Codepen или JSFiddle.

[smolPotat]

Максим Морев, проблема в том, что у меня ничего не получилось. Я могу залить разве что то, как я реализую такой блок с управлением сверху, но он сделан через input, где переключателями выступают label, но мне сказали, что в таком виде опустить их вниз не получится, ничего не сломав. Поэтому я интересуюсь как задачу можно решить в целом, без привязки к моему коду.

[Максим Морев]

smolPotat, если у вас ничего не получилось, но надо сделать - тогда это задание, а не вопрос.
Заливайте ваш вариант - это для того, чтобы вам объяснить, что вы делаете не так.

[smolPotat]

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

[Максим Морев]

smolPotat, в описание вопроса выложите пример.

Answer 1

[Максим Морев]

Добрый день.
По вашему примеру - я никогда не буду советовать делать какие-либо вкладки без использования JS - слишком негибко и неинтуитивно получается.
Но если всё-таки нужно без JS, то вы можете по-прежнему использовать селектор "~", если поменяете порядок элементов с помощью order из flex-спецификации.
Ваш причёсанный пример: https://codepen.io/morevm/pen/jOPpZKo
То, как это должно быть с JS: https://codepen.io/morevm/pen/XWbBZOK

Answer 2

[Максим]

Если нужно, чтобы они всегда справа были и менялись, то что-то такое получилось
https://codepen.io/MCheryabushkin/pen/KKpBQMJ