<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono:wght@400;700&display=swap');
</style>

<div class="layout">
  <div class="small-wrapper">
    <div class="almighty-sizer-box">
      <div class="inside">
  <h1 class="title">Lorem Wipsum</h1>
  <h3 class="subtitle">Container in 200px Wrapper</h3>
  <p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet est quis enim sollicitudin auctor vitae sed justo. Quisque venenatis dui eget arcu euismod, id pharetra elit maximus. Maecenas mollis dui nec eros accumsan, quis placerat risus pharetra. Sed dictum, dui a efficitur ultrices, erat nisl congue quam, ac imperdiet nulla nulla a turpis. Curabitur tortor felis, consequat id mattis ut, faucibus nec tortor. Aenean vitae magna mattis, gravida lacus et, laoreet lectus. Pellentesque fringilla magna sed placerat luctus. Etiam scelerisque risus orci, nec vehicula velit venenatis eget. Proin quis egestas tellus, elementum facilisis ipsum. Maecenas et eros turpis. Suspendisse sodales sapien ut erat tincidunt, eu porta neque blandit. Aliquam vehicula, turpis vitae posuere dapibus, nisl augue hendrerit leo, nec vulputate lectus metus non arcu.</p>
      </div>
</div>
  </div>
   <div class="big-wrapper">
    <div class="almighty-sizer-box">
      <div class="inside">
  <h1 class="title">Lorem Wipsum</h1>
  <h3 class="subtitle">Same Container in 400px Wrapper</h3>
  <p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet est quis enim sollicitudin auctor vitae sed justo. Quisque venenatis dui eget arcu euismod, id pharetra elit maximus. Maecenas mollis dui nec eros accumsan, quis placerat risus pharetra. Sed dictum, dui a efficitur ultrices, erat nisl congue quam, ac imperdiet nulla nulla a turpis. Curabitur tortor felis, consequat id mattis ut, faucibus nec tortor. Aenean vitae magna mattis, gravida lacus et, laoreet lectus. Pellentesque fringilla magna sed placerat luctus. Etiam scelerisque risus orci, nec vehicula velit venenatis eget. Proin quis egestas tellus, elementum facilisis ipsum. Maecenas et eros turpis. Suspendisse sodales sapien ut erat tincidunt, eu porta neque blandit. Aliquam vehicula, turpis vitae posuere dapibus, nisl augue hendrerit leo, nec vulputate lectus metus non arcu.</p>
      </div>
</div>
  </div>
</div>

.layout {
  display:flex;
}

.small-wrapper {
  width:200px;
}

.big-wrapper {
  width:400px;
}

.almighty-sizer-box {
  container-type: inline-size;
}

.almighty-sizer-box .inside {
  font-family: 'Roboto Mono', monospace;
  color: white;
  
  background-color: #efcf60;
  padding: 24px 48px
}


@container (max-width: 350px) {
  .almighty-sizer-box .inside {
    background-color: #3a475c;
    padding: 24px 16px;
  }
  .title {
    font-size: 24px;
  }
  .text {
    font-size: 12px;
  }
}