I have been experimenting with CSS to create vertical tabs without altering the HTML structure. The current CSS solution I am using works perfectly for horizontal tabs. Is it possible to tweak the CSS code to achieve the desired layout change?
[role=tablist] {
display: flex;
flex-direction: column;
background: #eee;
width: 400px;
margin: auto;
}
label {
border: 1px solid #ddd;
padding: 1em;
cursor: pointer;
display: block;
width: 70px;
}
[role=tabpanel] {
order: 9999;
display: none;
padding: 1em;
}
label:has(:checked) + [role=tabpanel] {
display: block;
}<div role="tablist">
<label>
Tab 1
<input name="tablist" type="radio" checked="">
</label>
<div role="tabpanel">
Tab 1 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<label role="tab">
Tab 2
<input name="tablist" type="radio">
</label>
<div role="tabpanel">
Tab 2 content. Invidunt ut labore et dolore magna aliquyam erat
</div>
<label role="tab">
Tab 3
<input name="tablist" type="radio">
</label>
<div role="tabpanel">
Tab 3 content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>Is there a way to position the tab panels on the top right without resorting to absolute positioning? I want to maintain their height. Alternatively, can flex-grow, shrink, basis, or use of <i>xxxx</i>-self properties help in achieving this layout adjustment for the tabs or tab panels?
An additional challenge would be aligning the tabs to the right while keeping the tab panels on the left side.