Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this?
I'm not sure if the current HTML structure is correct or if I should switch to a table format to achieve the desired spacing between lines. Using a table does allow for spaces below each line, but the code becomes too lengthy in HTML compared to another method.
<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>
And this is how it looks with the br tag 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's the CSS code associated with the above HTML:
.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;
}