how can i add a newline or breakline on css - css

Question

my code is in codepen how can i add breakline / new line between title and table ?
<li class="slide">
<H1>TITLE</H1>
<br />
<table border=1>
<tr>
<td>qdf</td>
<td>qdf</td>
</tr>
</table>
</li>
and css:
.slide {
width: 100%;
height: 100%;
flex: 1 0 100%;
display: flex;
justify-content: center;
align-items: center;
}

Answer 1

The default flex direction is row. Either you can remove the flex layout or make the flex-direction: column.
However, br is not the correct way to adjust spaces between flex items. Use properties like justify-content, gap, row-gap, column-gap
.slide {
width: 100%;
height: 100%;
flex: 1 0 100%;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
<li class="slide">
<H1>TITLE</H1>
<br />
<table border=1>
<tr>
<td>qdf</td>
<td>qdf</td>
</tr>
</table>
</li>

Answer 2

<section class="slider-wrapper">
<button class="slide-arrow" id="slide-arrow-prev">
‹
</button>
<button class="slide-arrow" id="slide-arrow-next">
›
</button>
<ul class="slides-container" id="slides-container">
<li class="slide">
<h1 class="title">TiTLE</h1>
<table border=1>
<tr>
<td>qdf</td>
<td>qdf</td>
</tr>
</table> </li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</section>
<footer>
Pen by Jemima Abu <span class="heart">♥</span>
</footer>
and use this css:
.slide {
/* width: 100%; */
height: 100%;
flex: 1 0 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}