javascript - CSS - position relative/absolute to a text inline element

Question

I have a navbar menu with dropdown tabs. The text are populated dynamically. I need to get the caret icons positioned next to the text at any given viewport size. Here is what I'm referring too (see green carets)

Below is the code

* {
  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>

question from:https://stackoverflow.com/questions/65894181/css-position-relative-absolute-to-a-text-inline-element

Answer 1

You can

• apply display: inline-block;and side padding to .text to create space for .caret
• apply position: relative; to the .menu-btn, to make it the position reference for the .caret element,
• apply position: absolute to .caret, add a right setting for the distance to the right border and a top: 50% and transform: translateY(-50%) to position it properly

Change the right, paddingand - if needed) margin settings as needed...

* {
  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;
  position: relative;
  
}
.text {
  border: 1px solid blue;
  display: inline-block;
  padding: 0 1em;
  margin: 0 10px;
}

.caret {
  min-width: 25px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

<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>