<div class="container-box">
  <div class="content">
  <div class="visual"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a aliquet nisl.</p>
  <a href="https://example.com">Lorem...</a>
  </div>
</div>

.container-box {
  resize: horizontal;
  overflow: auto;
  width: 100px;
  min-width: 100px;
  max-width: 350px;
  container-type: inline-size;
  border: 4px solid royalblue;
  font-family: 'Google Sans', sans-serif;
}
.content a {
  margin: 10px;
}
.visual {
  min-width: 80px;
  min-height: 80px;
  background-color: gold;
  margin: 10px;
}
.content p {
  margin: 10px;
}
@container  (min-width: 180px){
  .content {
    display: flex;
    flex-direction: row;
  }
  .content p { display: none; }
}
@container  (min-width: 220px){
  .content {
    display: flex;
    flex-direction: row;
  }
  .content p { display: flex; }
  .content a { display: none; }
}
@container  (max-width: 180px){
  .content {
    display: block;
  }
  .content p { display: block; }
  .content a { display: none; }
}
@container  (max-width: 120px){
  .content {
    display: block;
  }
  .content p { display: none; }
  .content a { display: block; }
}