I'm using CSS grid with two columns. I would like the buttons within the .right to always be horizontally next to each other, only taking up the space that is necessary i.e the width of the two buttons while the .left div takes up the remaining space. When the window is at a narrower width the .right div collapse so that the buttons are vertically on top of each other and when the window is at a wider width the buttons have too much space within the .right div. How can I achieve this using css grid? Any pointers would be greatly appreciated.
.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>