Two Columns with One Column Fixed Width

by Michael Mandarino

HTML

<h1>Two Columns with One Column Fixed Width - v1.0</h1>
<h2>Last Update: September 18th 2017 by Michael Mandarino</h2>

<h3>Flex Solution</h3>

<div class="left-fixed-flex">
  <div class="left"></div>
  <div class="right"></div>
</div>

<div class="right-fixed-flex">
  <div class="left"></div>
  <div class="right"></div>
</div>

<hr />
<hr />
<hr />
<h3>Original Solution</h3>

<div class="left-fixed">
  <div class="left"></div>
  <div class="right"></div>
</div>

<div class="right-fixed">
  <div class="right"></div>
  <div class="left"></div>
</div>

SCSS

/* Base Styles */
*,
*:after,
*:before {
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 16px;
    padding: 0.5em;
}

h1 {
    color: #61bb46;
    font-size: 2em;
}

h2 {
    font-size: 0.75em;
    margin-bottom: 1em;
}

.left-fixed-flex,
.right-fixed-flex,
.left-fixed,
.right-fixed {
    margin-bottom: 1em;
}

/* Main Styles */
/*** FLEX - LEFT FIXED ***/
.left-fixed-flex {
    display: flex;

    .left {
        border: 4px dashed #00afba;
        flex: 0 0 230px;
        margin-right: 1rem;
        min-height: 4rem;
    }

    .right {
        border: 4px dashed #00afba;
        flex: 1;
        min-height: 4rem;
    }
}

/*** FLEX - RIGHT FIXED ***/
.right-fixed-flex {
    display: flex;

    .left {
        border: 4px dashed #61bb46;
        flex: 1;
        min-height: 4rem;
    }

    .right {
        border: 4px dashed #61bb46;
        flex: 0 0 230px;
		margin-left: 1rem;
        min-height: 4rem;
    }
}


/***** ORIGINAL SOLUTION *****/

/*** LEFT FIXED ***/
.left-fixed {
    .left {
        border: 4px dashed blue;
        float: left;
        margin-right: 10px;
        min-height: 50px;
        width: 250px;
    }

    .right {
        border: 4px dashed blue;
        min-height: 50px;
        overflow: hidden;
    }
}


/*** RIGHT FIXED ***/
.right-fixed {
    .left {
        border: 4px dashed red;
        min-height: 50px;
        overflow: hidden;
    }

    .right {
        border: 4px dashed red;
        float: right;
        margin-left: 10px;
        min-height: 50px;
        width: 250px;
    }
}