<div class="wrapper">
  <div class="sidebar">
    <p>div.sidebar</p>
    <ul class="list">
      <li class="item">
        <div></div>
        <p>テキストです。<br>テキストです。<br>テキストです。</p>
      </li>
    </ul>
  </div>
  <div class="main">
    <p>div.main</p>
    <ul class="list">
      <li class="item">
        <div></div>
        <p>テキストです。<br>テキストです。<br>テキストです。</p>
      </li>
    </ul>
  </div>
</div>

/* リセット */
*,body {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}

/* Container Queries 以外のスタイル指定 */
.item div {
  width: 160px;
  height: 120px;
  border-radius: 10px;
  background-color: #ddd;
}

/* Container Queries 関連のスタイル指定 */
.wrapper {
  display: flex;
}
.sidebar {
  width: 30%;
}
.main {
  width: 70%;
}
.list {
  container-type: inline-size;
}

@container(min-width:400px) {
  .item {
    display: flex;
  }
}