Keep items on same vertical

user_15638805 0
Viewed 50

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

What I want:

enter image description here

What do I have now:

enter image description here

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

css html
2 Answers

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>

user_37443040

You can add a space nbsp; at the end of the numbers without parenthesis and use a monospace font. Kindly try this.

.column {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 0;
  font-family: Courier, monospace;
}

.cell {
  text-align: right;
}
<div class="column">
  <div class="cell">
    <div class="item">
      <span>123123 $&nbsp;</span>
    </div>
    <div class="item">
      <span>(123 $)</span>
    </div>
    <div class="items">
      <span>(1235 $)</span>
    </div>
    <div class="item">
      <span>12414 $&nbsp;</span>
    </div>
  </div>
</div>

user_62142100
Related