JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div class="two-thirds left">

    <!-- Quotes -->
    <div class="notepad">
        <p class="quote">“I have worked [...]</p>
        <span class="who">- Clara Craftsman [...]</span>
    </div><!-- .notebook -->

</div><!-- .two-thirds -->

<div class="one-third right">
    <p>This should be floating to the right of the notepad, but the Work Experience heading should be below.</p>
</div>
</div>

CSS

#wrapper
{
   min-width:700px;
}
.left,.right 
{ 
    display:inline-block; 
}
.left
{
    width:70%;
    min-width:420px;
}
.right{
    width:28%;
    min-width:170px;
}

/* Quotes */
.notepad,
.quote,
.who {
    display:block; 
    font-family:"Neucha",cursive;
    font-size:16px;
}
.notepad { 
    width:409px;
    padding-top:25px;
    margin-left:30px;
    background:url(../img/misc/notepad/notepad-top-big.png) no-repeat; 
}
.quote {
    width:315px; /* 409px total */
    padding:0 28px 24px 66px;
    background:url(../img/misc/notepad/notepad-middle-big.png) repeat-y;
}
.who { 
    width:315px; /* 409px total */
    padding:0 28px 48px 66px;
    background:url(../img/misc/notepad/notepad-bottom-big.png) no-repeat;
    text-align:right;
    font-style:italic;
    margin-top:-24px;
}