Responsive grid within multiple divs with no stylesheet

Question

I am trying to make a layout that looks roughly like this on a computer: wide layout and this on mobile: tall layout

I CANNOT use a separate stylesheet or the < style > tag, only the style attributes because it's for a site that doesn't allow these.

I tried a few different tutorials but can't make it work. Any help is appreciated, cleaner code tips too since I am a beginner. Thank you!

My code:

<div class="window" style="border: hidden; border-radius: 20px; box-shadow: 0 0 5px red; text-align: center; font-family: monospace; color: black; background-image: linear-gradient(#e6558b,red); padding: 10px; max-width: vw; max-height: 300px; margin: 10px; align-items: center;">
  
  <div class="title" style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; margin: inherit; align-items: inherit; text-align: inherit; max-height: 75px; font-size: 100%;">
    <p style="font-weight: bold;"><img src=""> title <img src=""></p>
    <p>subtitle</p>
  </div>
  
  <div class="miniholder" style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 100px)); grid-gap: 1rem;">
      
    <div class="leftortop" style="border: 1px solid black; height:100px; width: 100%; margin: inherit;">
      <p><img src=""></p>
    </div>
    
    <div class="rightorbottom" style="border: 1px solid black; height:100px; width: 100%; margin: inherit; align-items: inherit;">
      <p style="width: 100%; height: 100%;">lorem ipsum</p>
    </div>
  </div>
</div>

I tried initially using flex boxes but I don't know how those really work... I found this to be kind of helpful but it wasn't exactly what I wanted for my layout and I also couldn't really get it to work.

Answer 1

A possible solution is to use flexbox with flex-wrap: wrap.

First, we make .window a grid so as to use gap; note that grid-gap is just an alias of gap:

.window {
  display: grid;
  gap: 1rem;
}

We then make .miniholder a flexbox and allow it to wrap:

.miniholder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Now, for the hard part, we arbitrarily choose 2 / 5 as the ratio of .leftortop and .rightorbottom. Multiple that by another arbitrarily chosen number, we got 150 and 375. These will be .leftortop and .rightorbottom's flex-basis-es, or, basically, min-widths. flex-grow makes them expand their width as much as possible, with .leftortop as 2 / 5 as fast as .rightorbottom.

.leftortop {
  flex-grow: 2;
  flex-basis: 150px;
}

.rightorbottom {
  flex-grow: 5;
  flex-basis: 375px;
}

From these, I think you will be able to figure out the rest.

Try it:

.window, .title, .miniholder, .leftortop, .rightorbottom {
  padding: 1rem;
}

.window {
  display: grid;
  gap: 1rem;
}

.miniholder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.leftortop {
  flex-grow: 2;
  flex-basis: 150px;
}

.rightorbottom {
  flex-grow: 5;
  flex-basis: 375px;
}


/* Demo only */

.window, .title, .miniholder, .leftortop, .rightorbottom {
  outline: 2px solid black;
}

.leftortop, .rightorbottom {
  outline: 2px solid #aaa;
}

<div class="window">
  <div class="title">Header</div>
  <div class="miniholder">
    <div class="leftortop">Left content here</div>
    <div class="rightorbottom">Right content here</div>
  </div>
</div>