How to ensure that an oddly form block of text is equal in width?-CodePudding

<div>
  <div>Top Text</div>
  <div><span>A</span><span>B</span><span>C</span></div>
</div>

The idea is to have something like:

Top Text
A   B  C

Where Top Text is always lined up with the starting and ending text on the bottom.

CodePudding user response：

In this particular case, flexbox can do the job:

.box {
  display:inline-block; /* fit content */
}

.box > div:last-child {
  display:flex;
  justify-content:space-between;
}

<div >
  <div>Top Text</div>
  <div><span>A</span><span>B</span><span>C</span></div>
</div>