JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item fixed">Fixed Item</div>
</div>
CSS
html, body {
min-height: 100%;
height: 100%;
}
.container {
height: 50%;
background: #EEE;
display: flex;
flex-direction: column;
align-items: flex-start;
align-content: center;
}
.item {
background: #CCC;
}
.fixed {
align-self: flex-end;
}