float two page sections to be side by side

Is there a way to float two page sections to be side by side, rather than stacked? I have two list sections called "What We Do" and "What We Don't" and I'd like them to be next to each other in a column if possible. I also only want this to be on the desktop version.

https://trivium-trivia.squarespace.com/hosts

pass: manifest

6 hours ago, marleydesigns said:

Is there a way to float two page sections to be side by side, rather than stacked? I have two list sections called "What We Do" and "What We Don't" and I'd like them to be next to each other in a column if possible. I also only want this to be on the desktop version.

I've tried this code but it's not quite right:

 

@media screen and (min-width: 1200px) {div section[data-section-id="63c369b5c4b623793a779094"]{
    display: flex;width:50%;
    align-items: flex-end;
float:left;
  max-height:500px;
  }}

@media screen and (min-width: 1200px) {div section[data-section-id="63c36c958da16c30787a8f74"]{
    width:50%;
  max-height:500px;
  }}
 

https://trivium-trivia.squarespace.com/hosts

pass: manifest

We can use the fluid engine to create 2 image block that fit entire the section with the following settings on edit section

Then add the text blocks to make it look as you wish

14 hours ago, Beyondspace said:

We can use the fluid engine to create 2 image block that fit entire the section with the following settings on edit section

 

Then add the text blocks to make it look as you wish

Thanks! Since I have to make use of the list sections (being able to move through the slides is essential), this wouldn't really work for this instance. I appreciate the suggestion though!! I'll keep playing around with the css to see what else I can do.