Keep items on same vertical

February 1, 2022

I want to make currency icons on the same vertical line.

What I want:

What do I have now:

.column {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 0;
}

.cell {
  text-align: right;
}

<div class="column">
  <div class="cell">
    <div class="item">
      <span>123123 $</span>
    </div>
    <div class="item">
      <span>(123 $)</span>
    </div>
    <div class="items">
      <span>(1235 $)</span>
    </div>
    <div class="item">
      <span>12414 $</span>
    </div>
  </div>
</div>

>Solution :

Just generate the () using ::before and ::after with a CSS class for the task, and use CSS grid to arrange them:

.column {
  display: grid;
  grid-template-columns: max-content;
  padding: 10px 10px 10px 0;
  justify-items: end;
}

.cell {
  text-align: right;
}

.brackets {
  position: relative;
}

.brackets span::before,
.brackets span::after {
  position: absolute;
}

.brackets span::before {
  content: "(";
  left: -.35em;
}

.brackets span::after {
  content: ")";
  right: -.35em;
}

<div class="column">
  <div class="item">
    <span>123123 $</span>
  </div>
  <div class="item brackets">
    <span>123 $</span>
  </div>
  <div class="items brackets">
    <span>1235 $</span>
  </div>
  <div class="item">
    <span>12414 $</span>
  </div>
</div>