CODEWITHSUNDEEP
htmlcss
user10491983
user10491983

Reputation:

CSS How to align text when preceding element has a word break

So I'm trying to align some numbers to be on the same line, however the preceding line, because of a word break, I cannot get them all to be aligned.

I've tried position: absolute but I also want to make this work with browsers with small screen sizes, is there anyway to approach this?

Problem I'm dealing with

enter image description here

The way the code is structured is something like this

<h5>Header</h5>
    <div class = "row">
        <div class = "column">
            <label>Planned</label>
            <a href="">10</a>
        <div>
        <div class = "column">
            <label>Bought</label>
            <a href="">12</a>
        <div>
        ...

Upvotes: 0

Views: 56

Answers (1)

Stickers
Stickers

Reputation: 78676

Use flexbox, and it's better to use span than label unless in a form. 

.row {
  display: flex; /* flex row */
  width: 200px; /* example */
}

.column {
  flex: 1; /* grow */
  display: flex; /* flex */
  flex-direction: column; /* column */
  justify-content: space-between; /* push items */
}
<div class="row">
  <div class="column">
    <span>Planned</span>
    <a href="">10</a>
  </div>
  <div class="column">
    <span>Planned Planned</span>
    <a href="">10</a>
  </div>
  <div class="column">
    <span>Planned Planned Planned</span>
    <a href="">10</a>
  </div>
</div>

Upvotes: 1

Related Questions