Aligning elements in row to top? - html

Question

I'm trying to align the contents of a row, which is inside of a container, to the top of said row.
This is my current html:
<div class="container">
<div class="row">
<div class="ticket">
<!-- content -->
</div>
</div>
</div>
CSS for ticket:
<style>
.ticket{
border:5px solid black;
border-radius: 15px 50px 30px 5px;
width:20%;
height: fit-content;
display:inline-block;
clear: left;
margin-left:30px;
background-color:#eee;
}
</style>
"row" and "container" are both bootstrap.
Trying to align the 'tickets' with the top (red line)
I've tried using align-content and align-items but neither seem to be doing anything. Any help would be appreciated! Thank you.

Answer 1

You can use align-items: flex-start; in container of tickets.
.ticket {
display:flex;
align-items:flex-start;
}
.tick {
padding:20px;
border:4px solid #000;
margin:50px;
border-radius:0 30px 0 0;
}
<div class="container">
<div class="row">
<div class="ticket">
<div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur!</div>
<div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus</div>
<div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </div>
</div>
</div>
</div>

Answer 2

Try to use next css code:
.ticket {
display: flex;
}
.item-in-container {
#flex: 1;
}
Uncomment flex: 1; if you want them to have the same width

Answer 3

If you used the default behaviour of bootstrap it's aligned to the top:
.ticket {
height: 100px;
background-color: red;
}
.ticket:nth-child(2) {
height: 70px;
}
.ticket:nth-child(3) {
height: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="ticket col-3 m-3"></div>
<div class="ticket col-3 m-3"></div>
<div class="ticket col-3 m-3"></div>
</div>
</div>