Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5)
This should be done dynamically to adjust to a varying number of elements. The goal is to display content under the first and last corresponding numbers. Using Angular, I have access to the count of numbers in the component. The spacing between the numbers remains constant and does not change. If the text is too long, it can be wrapped within a specified maximum width.
An example has been provided below to demonstrate how this functionality should work, but it needs to be customized to accommodate different arrays of numbers
.container {
display: flex;
flex-direction: column;
width: 300px;
}
.container .numbers {
display: flex;
justify-content: center;
gap: 10px;
}
.container .numbers span {
width: 30px;
border: solid;
}
.container .text {
display: flex;
justify-content: center;
gap: 144px;
}
span {
border: solid;
}<div class='container'>
<div class='numbers'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class='text'>
<span>text1</span>
<span>text2</span>
</div>
</div>