How to align items based on 2 other items? - html

Question

I'm trying to align 3 items in Flexbox.
To make things easier, here's the current layout
The goal here is to keep the numbers ( 1, 2, 3 etc.. ) on the left, strictly aligned, the texts strictly aligned too ( so that the up arrows are vertically aligned ), and the right icon should go wherever it must go as long as it's in the div.
Here's the code :
.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
display: flex;
justify-content: space-between;
}
The HTML :
<div class="div-container">
<div class="form-div-container">
<div class="small-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="even-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="longer-longer-longer-text">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
<div class="small-text-two">
<p></p>
<div></div>
<img src="" alt="" srcset="">
</div>
</div>
</div>
The thing is the icons are not all of the same width, so they push the middle item. How can I make things the way I want ? Thanks !

Answer 1

You could set the widths of the elements that contain the numbers and icons to a fixed percentage value like below:
.box__icon,
.box__number {
width: 15%;
text-align: center;
}
See a full demo below:
/*IGNORE STYLE RULES FROM HERE......*/
body {
margin: 0;
}
i {
font-style: normal;
}
.box {
color: white;
font-family: sans-serif;
font-size: 2rem;
font-weight: bold;
padding: 30px;
}
.box:nth-child(1) {
background: firebrick;
}
.box:nth-child(2) {
background: darkturquoise;
}
.box:nth-child(3) {
background: chocolate;
}
.box:nth-child(4) {
background: midnightblue;
}
.box__text::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #ffffff transparent;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/*.... TO HERE*/
.box {
align-items: center;
display: flex;
justify-content: space-between;
}
.box__icon,
.box__number {
width: 15%; /*Change this to whatever value you want*/
text-align: center;
}
.box__text {
color: white;
font-family: sans-serif;
text-align: center;
}
<div class="container">
<div class="box">
<div class="box__number">1</div>
<p class="box__text">Small Text</p>
<i class="box__icon">Icon---</i>
</div>
<div class="box">
<div class="box__number">2</div>
<p class="box__text">Longer Text</p>
<i class="box__icon">Icon</i>
</div>
<div class="box">
<div class="box__number">3</div>
<p class="box__text">Even Longer Text</p>
<i class="box__icon">Icon--</i>
</div>
<div class="box">
<div class="box__number">4</div>
<p class="box__text">Longer Longer Longer Text</p>
<i class="box__icon">Icon---</i>
</div>
</div>