Hello,
I am trying to build my web page and it seems I can't get the result I want. I have three boxes, two of them should be on the same line, as shown in the picture below:
The code I wrote is the following:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: grid;
grid-template-columns: 10% 70%;
}
.sidebar {
background-color: green;
width: 100px;
height: 100px;
}
.archive-loop {
background-color: red;
width: 200px;
}
.footer {
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sidebar">Sidebar</div>
<div class="archive-loop">Loop</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The problem is that Sidebar and Loop may have a variable length depending on the contents, and I want them to show the length they need to be, meaning that if the sidebar is shorter (or viceversa), I want it to appear shorter, as in the following picture:
How can I achieve this result? Thank you very much in advance!
