CSS : align pair of divs horizontally across two vertical divs

Question

I've come across a specific design which I can't find any perfect solution for. My issue is the following:

My page is split in half vertically (Left Pannel / Right Pannel, taking the full page height), and in these pannels there will be pairs of divs that shall always be aligned horizontally. For instance, A and A' must be aligned. Even if the divs sizes change (see B and B', or C and C') they shall remain aligned.

I've tweaked a lot and found some decent solutions, the best one being 'faking' the Left and Right pannel, having a single div instead with a gradient background split in half. But the issue is that I need the divs architecture to be clean, otherwise I won't be able, later on, to do things like 'When you click on the Left Pannel, xxxx happens', or 'Disable the Right pannel by blocking all inputs in it' etc.

I've played with tables as well, but my horizontal divs appear dynamically (at first the Left / Right pannels are empty) and I couldn't force the table to use the full page height without the first few cells being abnormally big to fill the full height of their parent.

Is there any clean solution to my problem? It it helps, I'm using material-ui along with React.

Thanks a lot!

Check this out https://jsfiddle.net/8ywge9u1/ Not ideal but it may fit your needs — Cheslab, Nov 22 '20 at 10:34
Probably better than my 'background gradient' solution but I still can't bind events on the left or right pannel as they do not really exist — GaelF, Nov 22 '20 at 11:18

score 0 · Answer 1 · answered Nov 22 '20 at 09:54

this is an example of how you can do it

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.column {
  flex: 0 0 50%;
  padding: 10px;
}

.column-1 {
  background-color: rgba(255, 0,  0, 0.6);
}

.column-2 {
  background-color: rgba(0, 0, 255, 0.6);
}

.column-content {
  background-color: red;
  padding: 10px;
}

<div class="container">
  <div class="column column-1">
    <div class="column-content">
      content with<br>
      multiple lines
    </div>
  </div>
  <div class="column column-2">
    <div class="column-content">
      content with one line
    </div>
  </div>
  <div class="column column-1">
    <div class="column-content">
      content with one line
    </div>
  </div>
  <div class="column column-2">
    <div class="column-content">
      content with<br>
      multiple lines
    </div>
  </div>
</div>

Still can't bind events to the left / right pannel as they do not exist — GaelF, Nov 22 '20 at 11:20

CSS : align pair of divs horizontally across two vertical divs

1 Answers1