Edit in JSFiddle

$("#pagesize").text($(window).width());

$(window).resize(function () {
    $("#pagesize").text($(window).width());
});

<div class="row">
  <div class="alpha">
      <p>Lots of content</p>
      <p>Lots of content</p>
      <p>Lots of content</p>
  </div>
  <div class="beta">
      <p>This column is variable but won't go below 300px</p>
  </div>
</div>

<div class="row">
  <div class="alpha">
      <p>Lots of content</p>
      
  </div>
  <div class="beta">
      <p>This column is variable but won't go below 300px</p>
      <p>Lots of content</p>
      <p>Lots of content</p>
  </div>
</div>

<p>Other page content</p>

<p>Page Width: <span id="pagesize"></span></p>

.row {
    background: red;    
    margin-bottom: 20px;
    position: relative;
    *zoom: 1;
}
.row:before, .row:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
}

.row:after {
    clear: both;
}

.alpha {
    background: blue;
    width: 60%; 
    float: left;
}

.beta {
    background: green;
    width: 40%;
    float: right;
    min-width: 300px;
}

@media (max-width: 750px) { /* min-width / % = (300 / 0.4) */
    
    .alpha {
        width: -moz-calc(100% - 300px);
        width: -o-calc(100% - 300px);
        width: -webkit-calc(100% - 300px);
        width: calc(100% - 300px);
    }
    .beta {
        width: 300px;
        background: orange;
    }
}