How to draw lines in ionic

Question

I am trying to design something like

This is what I have so far:

How do I add those lines in ionic?

How do I add CSS to get the desired design in here?

This code is what I have so far:

<ion-slide>

  <div class="row">
    <div class="col text-center">
      <img src="img/icon1.png"></img>
      <br>
      Live Outlets </div>
    <div class="col text-center">
      <img src="img/icon2.png"></img>
      <br>
      Bills</div>
  </div>

  <div class="row">
    <div class="col text-center">
      <img src="img/icon3.png"></img>
      <br>
      Items Sold </div>
    <div class="col text-center">
      <img src="img/icon4.png"></img>
      <br>
      Discount</div>
  </div>


  <div class="row">
    <div class="col text-center">
      <img src="img/icon5.png"></img>
      <br>
      Customer </div>
    <div class="col text-center">
      <img src="img/icon6.png"></img>
      <br>
      Sale</div>
  </div>

</ion-slide>

Answer 1

Hi this code is worked for me, check this:

<ion-slide>
  <div class="row">
    <div class="col col-50">
      <img src="img/icon1.png"></img><br>
      Live Outlets
    </div>
    <div class="col col-50">
      <img src="img/icon2.png"></img>
      <br>
      Bills
    </div>
  </div>
  <div class="row">
    <div class="col col-50">
      <img src="img/icon3.png"></img>
      <br>
      Items Sold </div>
    <div class="col col-50">
      <img src="img/icon4.png"></img>
      <br>
      Discount</div>
  </div>
  <div class="row">
    <div class="col  col-50">
      <img src="img/icon5.png"></img>
      <br>
      Customer </div>
    <div class="col  col-50">
      <img src="img/icon6.png"></img>
      <br>
      Sale</div>
  </div>
</ion-slide>

and in your style.css file add an extra css property as:

.col{
   border: 1px solid black;
}

having any queries, please reply