Setting position of custom slider controls (CSS) - html

Question

I've been making my anime website where people can watch anime for free with subtitles (Bulgarian subtitles, since I'm from Bulgaria). Now I'm remaking it from scratch because I have been using a theme but It didn't have much functionality... Now I'm making the slider for the recently added animes but I want it to be a custom one so I'm making.... the slider controls are not in a position, so I tried with float, flex with float, etc.... Here's a picture where it should belong: click to open the image (important)
Here's the HTML:
<div class="recent-anime">
<!-- Title and Controls -->
<div class="title-controls">
<h1 class="title">Наскоро добавни</h1>
<a><i class="fas fa-angle-left"></i></a>
<a><i class="fas fa-angle-right"></i></a>
</div>
<!-- Anime cards -->
<div class="animecards">
<div class="animecard">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
</div>
</div>
And the CSS:
.title-controls {
display: flex;
flex-direction: row;
font-size: 42px;
margin-bottom: 10px;
}
.title {
font-size: 26px;
}
.animecards {
display: flex;
}
.animecard {
display: block;
float: left;
}
.animecard img {
max-height: 325px;
}
.ml {
margin-left: 15px;
}
.ani {
text-align: center;
}
There's no JS. Still on the HTML and CSS part.
NOTE: This is clean CSS!

Answer 1

justify-content: space-between; on title-controls class will solve the issue shown in image
.title-controls {
display: flex;
flex-direction: row;
font-size: 42px;
margin-bottom: 10px;
justify-content: space-between;
}