How do I align the content of two divs when the data in those divs may change?

Question

I've got two Divs, one holds temperature information, the other humidity.

<div class="weatherwrap">
                  <div class="tempwrap" title="Current Temperature">
                        <span id=tempinfo><javascript injected data></span>
                  </div>
                  <div class="humidwrap" title="Current Humidity">
                        <span id="humidinfo"><javascript injected data></i></span>
                  </div>
</div>

Right now, they render like this:

I'd really prefer it if they always aligned by the decimal point (.), as this consistently creates the most pleasing visual.

However, if the number changes, say - the temperature raises into the positive, or humidity drops by a half percentage point, these two divs will be aligned differently, again. How can I ensure that these two divs will align themselves the most optimal way, even if the length of the information inside them is to change?

I've tried hard coding it, and wrote some very bad JavaScript that adds padding to one based on the length of the other, but I'm not satisfied of the reliability of either solutions.

You keep an extra space for the `-` element, and add it there based on condition. If value is negative, then make it positive and add - in that extra space, and if value is positive, it will always keep the space there. — Swaraj Gandhi, Dec 06 '22 at 03:16
Check https://stackoverflow.com/questions/1363239/aligning-decimal-points-in-html — James, Dec 06 '22 at 03:16

score 0 · Accepted Answer · answered Dec 06 '22 at 03:23

You can align on the period. Use something like below:

#container {
  display: flex;
  flex-flow: column nowrap;
  outline: 1px black dotted;
}
#container > div {
  display: flex;
}
.a {
  width: 48px;
  text-align:right;
}
.b {
  
}
.c {
  width: 48px;
}

<div id=container>
  <div>
    <div class=a>12</div><div class=b>.</div><div class=c>12</div>
  </div>
  <div>
    <div class=a>1234</div><div class=b>.</div><div class=c>12</div>
  </div>
  <div>
    <div class=a>12</div><div class=b>.</div><div class=c>1234</div>
  </div>
  <div>
    <div class=a>123456</div><div class=b>.</div><div class=c>12</div>
  </div>
</div>

How do I align the content of two divs when the data in those divs may change?

1 Answers1