I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container.
jQuery(document).ready(function($) {
$('.slider').slick({
speed: 500,
slidesToShow: 3
});
});html, body {
background: #102131;
color: white;
}
.container {
position: relative;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.slick-slider {
background: #3a8999;
font-size: 20px;
text-align: center;
width: 90%
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bba4a1aba3e5aba9baa7bdbbada488f9e6f0e6f9">[email protected]</a>/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7f60656f67216f6d7e63797f69604c3d2234223d">[email protected]</a>/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10637c79737b3d7371627f6563757c50213e283e21">[email protected]</a>/slick/slick.min.js"></script>
<div class="container">
<div>
<h1>This text should go to the top </h1>
</div>
<div class="slider" data-slick="{'arrows': true}">
<div>Slider stays directly above text below</div>
<div>Slider stays directly above text below</div>
<div>Slider stays directly above text below</div>
<div>Slider stays directly above text below</div>
<div>Slider stays directly above text below</div>
</div>
<div>
<h1>This text should stay at the bottom</h1>
</div>
</div>