I have the following structure currently:
However, my desired outcome is:
Is there any way to achieve this while keeping the HTML structure the same? Below is an example of the code:
.container {
display: flex;
/* Makes the container an inline block element */
vertical-align: top;
/* Aligns the top edge of the container with the top edge of the previous element */
width: 600px;
}
label {
background-color: #8ff;
display: inline-block;
/* Makes the label element an inline block element */
}
.content-wrapper {
background-color: #f8f;
display: flex;
/* Makes the content-wrapper an inline block element */
flex-wrap: wrap;
white-space: nowrap;
/* Prevents the content from wrapping to the next line */
overflow-x: auto;
/* Allows horizontal scrolling if the content overflows */
}
span {
display: inline-block;
/* Makes the child elements inline block elements */
margin-right: 10px;
/* Add some spacing between the child elements */
}<div class="container">
<label>Label</label>
<div class="content-wrapper">
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
<span>Content</span>
</div>
</div>I've experimented with flex and grid layouts, but none seem to work. The layout works when the label is inside the div, but I'd rather avoid that approach unless absolutely necessary