Keep items on same vertical-CodePudding

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 >
  <div >
    <div >
      <span>123123 $</span>
    </div>
    <div >
      <span>(123 $)</span>
    </div>
    <div >
      <span>(1235 $)</span>
    </div>
    <div >
      <span>12414 $</span>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <span>123123 $</span>
  </div>
  <div >
    <span>123 $</span>
  </div>
  <div >
    <span>1235 $</span>
  </div>
  <div >
    <span>12414 $</span>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <span>123123 $&nbsp;</span>
    </div>
    <div >
      <span>(123 $)</span>
    </div>
    <div >
      <span>(1235 $)</span>
    </div>
    <div >
      <span>12414 $&nbsp;</span>
    </div>
  </div>
</div>