JSFiddle - React, Tailwind, and code Playground

HTML

<div class='column-contain'>
    <div class='c-right'>
        The right floated div is secondary content, but fixed width.  It should drop below the primary content when there isn't enough room.
    </div>
    <div class='c-left'>
        This left div is primary content, but non fixed in size.  When there isn't enough room to nicely display side by side, this div should be on top.
    </div>
</div>

CSS

.column-contain
{
    width: 100%;
    background: silver;
    overflow: hidden;
}
.c-right
{
    float: right;
    width: 200px;
    background: red;
}
.c-left
{
    min-width: 150px;
    background: green;
    overflow: hidden;
}
@media screen and (max-width: 300px)
{
  .c-left{
      background: cyan;
  }
  .c-right{
      width: 100%;
        float: none;
    }
}