Используйте сетку 1x2, позволяя времени охватить ширину контейнера:
html, body {
background-color: #363f55;
margin: 0;
font: normal 16px Sans-Serif;
padding: 0 1rem;
}
h4 {
color: #fff;
}
#app {
width: 50rem;
}
.container {
background-color: #1c2028;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas: "timestamp timestamp" ". server";
padding: 2rem;
}
.container .timestamp {
color: grey;
grid-area: timestamp;
}
.container .server {
color: #698081;
grid-area: server;
}
<section id="app">
<div class="sample">
<h4>Shortish Date</h4>
<div class="container">
<div class="timestamp">
Last Update: 14 Seconds Ago
</div>
<div class="server">
<p class="name">watch_server</p>
<p class="id">1578811744288</p>
</div>
</div>
</div>
<div class="sample">
<h4>Longish Date</h4>
<div class="container">
<div class="timestamp">
Last Update: 1 Minute 49 Seconds Ago
</div>
<div class="server">
<p class="server-name">watch_server</p>
<p class="server-id">1578811744288</p>
</div>
</div>
</div>
</section>
Я бы также переоценил цвета. Текст почти полностью неразборчив.