<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child > span {
margin-right: auto;
}
.box:last-child > span {
margin-left: auto;
}
.box {
align-items: center;
border: 1px solid #666;
background-color: #c8cbcf;
height: 60px;
}
p {
text-align: center;
margin: 5px 0 0 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span>short text</span>
</div>