Я использую сетку CSS с двумя столбцами.Мне бы хотелось, чтобы кнопки внутри .right всегда были горизонтально рядом друг с другом, занимая только необходимое пространство, то есть ширину двух кнопок, в то время как .left div занимает оставшееся пространство.Когда окно имеет более узкую ширину, элемент .right делится так, что кнопки располагаются вертикально друг над другом, а когда окно имеет более широкую ширину, кнопки имеют слишком много места в пределах элемента .right.Как я могу добиться этого с помощью CSS сетки?Любые указатели будут с благодарностью.
.line {
display: grid;
grid-gap: 10px;
/* This illustrates the idea in terms of postioning, but, when the window is at a narrower width the .right div collapse so that the buttons are vertically on top of each other and at a wider width gives the buttons withing the .right have too much space */
grid-template-columns: 5fr 1fr;
}
.left {
background-color: lightcoral;
}
.right {
background-color: lightcyan;
}
<div class="line">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="right">
<button>Delete</button>
<button>Edit</button>
</div>
</div>