Responsive layout with desktop sidebar issue - html

Question

Disclaimer: I'm not sure how to address this issue please be kind and suggest another title I'll edit
Situation
I have a responsive design mobile / desktop with blocks:
Mobile
| block1 |
| block2 |
| clientInfos |
| equipmentInfos |
| history |
Desktop
| clientInfos | block1 |
| equipmentInfos | block2 |
| - | history |
Problem
The thing is I dont what to setup this as a grid / table because this page as multiple states where height are heavly dynamics.
Some samples of possible renders:
| clientInfos | block1 |
| clientInfos | block2 |
| clientInfos | history |
| clientInfos | - |
| clientInfos | - |
| equipmentInfos | - |
| clientInfos | block1 |
| equipmentInfos | block1 |
| - | block1 |
| - | block2 |
| - | history |
My main issue is : clientInfos and equipmentInfos are in the middle of the list in mobile design. So, I can wrap them in a single div. But not other items.
Note, my devs are mobile first.
Best try so far
My best try is to wrap clientInfos and equipmentInfos then use a grid-template:
function addSpace (e) {
e.target.append(document.createElement("br"))
}
.content {
display: flex;
flex-direction: column;
gap: 22px;
}
/* media screen to 1px to show my issue */
#media screen and (min-width: 1px) {
.content {
display: grid;
grid-template-areas:
"clientAndEquipment block1"
"clientAndEquipment block2"
"clientAndEquipment history";
}
}
.block1 { grid-area: block1 }
.block2 { grid-area: block2 }
.clientAndEquipment {
/* To keep the parent flow */
display: flex;
flex-direction: column;
gap: 22px;
grid-area: clientAndEquipment
}
.history { grid-area: history }
.block { background: pink; padding: 5px; }
<div class="content">
<div class="block1 block">BLOCK1</div>
<div class="block2 block">BLOCK2</div>
<div class="clientAndEquipment">
<div class="client block" onclick="addSpace(event)">CLIENT click here to add spaces</div>
<div class="equipment block">EQUIPMENT</div>
</div>
<div class="history block">HISTORY</div>
</div>
The problem with this approach is the case when client is to big, it result to other block expanding as 33% height each. It's not ideal.
Note: I tried to had an extra "clientAndEquipment -" to the template-grid-areas but it add an extra blank line due to gap: 22px which I wanna keep.
Question
Did you see a better integration of this design according to constraints mention ?
Note: js related answers are not better imo.

Answer 1

I found a solution using plain old float property re-ordering my div.
workflow
Put all div that "could" go left on top of the flow (in the .content).
<div class="wrapper">
<div class="clientInfo left"></div>
<div class="equipmentInfo left"></div>
<div class="block1 main"></div>
<div class="block2 main"></div>
<div class="history main"></div>
</div>
mobile
Display wrapper as flex then apply an order on each item.
.wrapper { display: flex; flex-direction: column; }
.clientInfo { order: 3; }
.equipmentInfo { order: 4; }
.block1 { order: 1; }
.block2 { order: 2; }
.history { order: 5; }
desktop
Display wrapper as block then:
// all media query desktop ...
.wrapper {
--sidebar-width: 400px;
--sidebar-gap: 22px;
display: block;
}
.left {
float: left;
width: var(--sidebar-width);
margin-right: var(--sidebar-gap);
clear: both; /* <-- set the lefties as columns */
}
.main {
margin-left: calc(var(--sidebar-width) + var(--sidebar-gap));
}
And Voila!