List div elements underneath each other

Question

How would I get Items 1-4 line up directly underneath each other?

.remove-top-border {
  border-top: none;
}

.remove-bottom-border {
  border-bottom: none;
}

.remove-top-padding {
  padding-top: 0px;
}

<div class="list">

  <div class="item item-input-inset remove-bottom-border">
    <div class="row">
      <div class="col bold">Cost</div>
    </div>
  </div>

  <div class="item item-input-inset remove-top-border remove-top-padding">
    <div class="col col-75">Item 1</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 2</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 3</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 4</div>
    <div class="col col-25">£20</div>
  </div>

</div>

Output

The code above returns this at the moment.

Here is my jsfiddle: http://jsfiddle.net/39nszmww/2/ .

Answer 1

You are not using the col class properly. The Ionic grid system is based up on the CSS3 flexbox. The col class divides into percents, which should sum up to 100 percents. So you can split your row into as many cols as you wish as long as they don't exceed 100 (otherwise, the grid will bug out as happened to you).

So <div class="col col-50"> will create a column that takes 50% of the row's width.

To fix your issue, split each item into a separate row. Also, remove the item-input-inset class because it stops the grid from expanding vertically.

<div class="item">
    <div class="row">
        <div class="col col-75">Item 1</div>
        <div class="col col-25">£20</div>
    </div>
    <div class="row">
        <div class="col col-75">Item 2</div>
        <div class="col col-25">£10</div>
    </div>
    <div class="row">
        <div class="col col-75">Item 3</div>
        <div class="col col-25">£30</div>
    </div>
</div>

JSFiddle: http://jsfiddle.net/0tcdr9dg/