CSS сетка - создание 2-х div с разной шириной отзывчивых

Question

Интересно, можно ли сделать 2 столбца адаптивными с сеткой css без использования медиа-запросов. У меня есть 2 элемента div, один с правой стороны должен занимать минимум 400px, если это невозможно, тогда он должен go в следующую строку, а левый столбец должен иметь остальную ширину. Интересно, как мне это сделать?

<div class="container">
  <div class="left-div"></div>
  <div class="right-div"></div>
</div>

Css, которые у меня есть:

.container {
    display: grid;
    grid-template-columns: minmax(60%, 100%) minmax(0, 400px);
    grid-column-gap: 30px;
}

Но это не помогает, как можно Я добился переноса столбца в новую строку?