To align your text to the bottom, you can convert .card-body into a flex element using display: flex, and then apply margin-top: auto to both .text-left and .text-right.
However, this may cause the right-hand text to move to the left and be on the same line. To fix this, include justify-content: space-between in .card-body and add a margin-bottom of around 20px to .text-left.
You can see this implementation in the code snippet below:
.d-flex {
height: 100vh; /* Adjusted for Stack example */
}
.card {
height: 100%;
}
.card-body {
overflow-y: auto;
}
.badge {
font-weight: 400;
}
/* NEW */
.card-body {
display: flex;
justify-content: space-between;
}
.text-left, .text-right {
margin-top: auto;
}
.text-left {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-flex justify-content-center">
<div class="container container-child">
<div class="card">
<div class="card-body">
<div class="text-left"><span class="badge badge-pill badge-secondary" title="2020-01-01 09:00:00">Hello</span></div>
<div class="text-right"><span class="badge badge-pill badge-primary" title="2020-01-01 09:00:00">World</span></div>
</div>
<div class="card-footer">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Your message..." autofocus />
<div class="input-group-append">
<button type="button" class="btn btn-primary"><i class="fa fa-paper-plane-o fa-fw"></i><span class="d-none d-sm-inline"> Send</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that if this is a chat application where messages appear sequentially, you should adjust the margin-bottom of each element by the same value (like 20px in the example) for every new message generated.