How to add a space below each line

Hi I dont know how to add space below each line of this code. I tried to add br and margin to it but that deosn't work any help.

I don't even know if this type in html is good or should I change it to table and do this, with this is possible to add spaces below each line, but in html its too long, than another example

<table>
                            <tr>
                              <td>Etiam poseure</td>
                              <td class="tučny__text">Nulla est</td>
                            </tr>
                            <tr>
                              <td>Fusce wisi</td>
                              <td class="tučny__text">2305</td>
                            </tr>
                            <tr>
                              <td>Bla hola tola et</td>
                              <td class="tučny__text">Rerum trada</td>
                            </tr>
                            <tr>
                              <td>Vie visi</td>
                              <td class="tučny__text">A</td>
                            </tr>
                          </table>

here is how it looks now with br in html

<div class="card-table">
    <div class="left-column">
      Etiam poseure <br />
      Fusce wisi <br />
      Bla hola tola et <br />
      Vie wisi
    </div>
    <div class="right-column">
      Nulla est<br />
      2305 <br />
      Rerurm trada <br />
      A
    </div>
  </div>

Here is my css

.card-table{

display: flex;
justify-content: space-between;
font-size: 1.25rem;
border: 1px solid black;
}

.left-column {
  flex-basis: 45%;
  font-weight: normal;
  font-style: italic;
  text-align: right;

}

.right-column {
  flex-basis: 45%;
  text-align: left;

}


.left-column br,
.right-column br {
  margin-bottom: 10px; 
}

Solution

I wouldn't use <br/> as its not really semantic.

Heres an example:

.card-table {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  border: 1px solid black;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
}

.left-column {
  flex-basis: 45%;
  font-weight: normal;
  font-style: italic;
  text-align: right;
}

.right-column {
  flex-basis: 45%;
  text-align: left;
}

.left-column div, .right-column div {
  margin-bottom: 10px;
}

<div class="card-table">
    <div class="left-column">
      <div>Etiam poseure</div>
      <div>Fusce wisi</div>
      <div>Bla hola tola et</div>
      <div>Vie wisi</div>
    </div>
    <div class="right-column">
      <div>Nulla est</div>
      <div>2305</div>
      <div>Rerurm trada</div>
      <div>A</div>
    </div>
</div>