Need help aligning caret icons next to dynamically populated text in a navbar menu with dropdown tabs at any viewport size. Referring to positioning similar to the green carets shown here: https://i.stack.imgur.com/4XM7x.png
Check out the code snippet below:
* {
box-sizing: border-box;
}
body {
margin-top: 70px;
font-family: Arial;
font-size: 30px;
}
.nav-wrapper {
width: 100%;
background-color: pink;
height: 150px;
display: flex;
}
.filler-left {
// margin-right: auto;
flex: 2;
background-color: brown;
}
.filler-right {
background-color: black;
width: 600px;
}
.menu-wrapper {
background-color: lightblue;
display: flex;
justify-content: flex-end;
}
.menu-btn {
text-align:center;
background-color: orange;
border: 1px solid red;
display: flex;
align-items: center;
}
.text {
border: 1px solid blue;
}
.caret {
min-width: 25px;
}<div class="nav-wrapper">
<div class="filler-left">
<img src="https://via.placeholder.com/150"/>
</div>
<div class="menu-wrapper">
<div class="menu-btn">
<span class="text">lo netrunner</span>
<img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
</div>
<div class="menu-btn">
<span class="text">Planes of Salads & Greatness</span>
<img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
</div>
<div class="menu-btn">
<span class="text">Formulas & Computations</span>
<img class="caret" src="https://assets.codepen.io/867725/Icon_Caret.svg" />
</div>
</div>
<div class="filler-right">
</div>
</div>If needed, you can also refer to this CodePen for reference: https://codepen.io/vincentntang/pen/f44a23aa2b2de633e3d2dffa1e83c0b9
The width of the text is determined by the length of the first word on the second line as per HTML text standards.
Previous attempts made:
- Tried using
position: relativeon inline text andposition:absolutefor the caret image, but was unsuccessful - Experimented with
width: fit-contenton thetextclass element, causing the text "Planes of Salads & Greatness" to extend to three lines instead of two across all viewport sizes