CODEWITHSUNDEEP
htmlcss
MrScf
MrScf

Reputation: 2497

CSS - Align div elements in three columns

I am trying to align a list of labels, input radios and icons. The alignment should be:

   Label     Icon
() LongLabel Icon
() Label     Icon

Here my code:

div.mygrid {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.mygrid > div > label       { text-align:left; }
<div class="mygrid">
  <div>
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Long Text #1</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #2</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #3</label>
    <i>Colum2</i>
  </div>  
</div>

Also I find awful to define spaces to replace the space of the radiobutton:

<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Long Text #1</label>

Any idea how can I achieve that?

Upvotes: 0

Views: 762

Answers (2)

Johannes
Johannes

Reputation: 67738

If you don't insist on using Grid, I propose a solution similar to the following (should be self-explanatory). Adjust values (width and padding) as needed.

label {
  text-align: left;
  display: inline-block;
  width: 160px;
}
label.L1 {
  padding-left: 30px;
}

input[type="radio"] {
  width: 30px;
  margin: 0;
}
i {
  width: 200px;
}
<div class="mygrid">
  <div>
    <label class="L1">Long Text #1</label>
    <i>Colum2</i>
  </div>
  <div>
    <input type="radio"><label>Label #2</label>
    <i>Colum2</i>
  </div>
  <div>
    <input type="radio"><label>Label #3</label>
    <i>Colum2</i>
  </div>
</div>

Upvotes: 2

double_pablo
double_pablo

Reputation: 177

div.mygrid {
    display:flex;
    flex-direction: column;
}
div.mygrid > div > label       { text-align:left; }

.ml-3 {
margin-left: 17px;
}
<div class="mygrid">
  <div class="ml-3">
    <label>Long Text #1</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #2</label>
    <i>Colum2</i>
  </div>
  <div>
    <label><input type="radio">Label #3</label>
    <i>Colum2</i>
  </div>  
</div>

Upvotes: 0

Related Questions