'Adding an equal amount of space between different sized elements with justify-content: space between [duplicate]

[![enter image description here][1]][1] I have a table that requires flex due to it needing support for mobile use. I currently use flex justify-content: space-between; to give the three elements equal space; however since the data in the "rows" are uneven due to font, the center elements get shoved around. Is there a way to lock the center column in place?

As you can see the center column is slightly shoved, so is there a way to lock it in place?

CSS:'

        .UsageOverview__detailsRecord {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: $space-xxxs $space-xs;
         

          .UsageOverview__detailsRecordName {
            font-weight: $font-weight-bold;
          }

          .UsageOverview__detailsRecordValue {
            font-weight: 400;
            text-align: right;
          }

          .UsageOverview__detailsPriceValue {
            font-weight: 400;
            text-align: center;
          }

HTML:

 <div repeat.for="record of usage.currentPeriod" class="UsageOverview__detailsRecord">
                      <span class="UsageOverview__detailsDateValue">
                        <template if.bind="dateRange === 'year'">
                          ${record.fromTime | date:'MMMM'}
                        </template>
                        <template if.bind="dateRange === 'month'">
                          ${record.fromTime | date:'DD.'}
                        </template>
                        <template if.bind="dateRange === 'day'">
                          ${record.fromTime | date:'HH:00'}
                        </template>
                      </span>
                      <span class="UsageOverview__detailsDataValue">
                        ${getTablePriceValue(record) & signal:'force-refresh-signal'}
                      </span>
                      <span class="UsageOverview__detailsRecordValue">
                        ${getTableDataValue(record) & signal:'force-refresh-signal'}
                      </span> ```


  [1]: https://i.stack.imgur.com/D8Fl8.jpg
htmlcsstypescriptflexboxjustify


Solution 1:[1]

I would personally look at the space-evenly value instead of space-between. But not sure if this breaks your CSS or something.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kasper

Related Questions