<section class="conversations">
  <div class="message">
    <div class="header">
      <h1 class="sender">Albert</h1>
      <small class="timestamp">2 days ago</small>
    </div>
    <div class="text">
      Hey, are you there. I'm reaching soon.
    </div>
  </div>
  
  <div class="message">
    <div class="header">
      <h1 class="sender">Rebecca</h1>
      <small class="timestamp">3 days ago</small>      
    </div>
    <div class="text">
      No no we are ready, you can take the order. I’ll have the corn mushroom soup to start, and the grilled chicken with mashed potatoes and peas. And, please also bring a bowl of garlic rice
    </div>
  </div>
  
  <div class="message">
    <div class="header">
      <h1 class="sender">Knight</h1>
      <small class="timestamp">a day ago</small>      
    </div>
    <div class="text">
      Thank you so much! I’ve only been in town two days ago, so I really don’t know my way around yet
    </div>
  </div>
</section>
.conversations {
  container-type: inline-size;
  container-name: conversations;
  margin: auto;
  max-width: 1280px;
  background-color: ghostwhite;
  border-color: black;
  font-size: 1.5rem;
}

.message {
  padding: 0.5rem;
}

.header {
  display: flex;
  margin-bottom: 0.5rem;
  align-items: center;
}

.sender {
  flex-grow: 1;
}

@container conversations (max-width: 800px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .sender {
    margin-block-end: 0;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.