JSFiddle - React, Tailwind, and code Playground

by leonsaysHi

HTML

<div class="wrapper">
  <div class="content">
    <div class="main">main...</div>
    <div class="expanded">
      <div>expanded...</div>
    </div>
  </div>
</div>

SCSS

$content-max-width: 500px;
$horiz-padding: 50px;
$minvw: $content-max-width + $horiz-padding * 2;

/* decorations */
body {  
  margin: 0;
  * { box-sizing: border-box; }
  .wrapper {
    & > * {
      border: solid 2px #666;
      min-height: 80vh;
    }
    .content {
      box-shadow: 0 3px 8px rgba(0, 0, 0, .25)
    }
    .main {
      min-height: 50vh;
      background-color: #bbffbb;
    }
    .expanded {
      background-color: #ffbbbb;
      > * {
        background-color: #ffffbb;
        height: 100%;
      }
    }
  }
}

/* mobile first */
.wrapper {  
  padding: 0 $horiz-padding;
  .content {
    max-width: $content-max-width;
    margin: 0 auto;
  }
}

/* large screen */
@media (min-width: $minvw) {
  .wrapper {
    display: flex;
    padding-right: calc(0px);
    .content {
      flex-grow: 1;
      display: flex;
      max-width: calc(99999px);      
      margin: 0 0 0 calc( (100vw - #{$content-max-width} - #{$horiz-padding}*2) * .5);
    }
  }
  .main {
    flex-basis: $content-max-width * .5;
  }
  .expanded {
    flex-grow: 1;
    > * {
      width: $content-max-width *.5;
    }
  }
}