JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
<header>
    <h1>This is the header</h1>
</header>
<div class="container">
    <div class="row">
	<div class="span4">
	<div class="well well-small affix-top" id="account-overview-container">

		<h4 class="no-top-margin">Customer Info</h4>
		<ul class="account-info-list unstyled no-bottom-margin">
			<li>
				<strong class="info-title" style="width: 78px;">Name:</strong>
				<span class="info-data" style="width: 180px;">resold1 of reseller2</span>
			</li>
			<li>
				<strong class="info-title" style="width: 78px;">Location:</strong>
				<span class="info-data" style="width: 180px;">			<em class="muted">N/A</em>
</span>
			</li>
			<li>
				<strong class="info-title" style="width: 78px;">Local Time:</strong>
				<time class="info-data" datestamp="1/1/0001 12:00:00 AM" title="12:00:00 AM" style="width: 180px;">
					12:00 AM
				</time> 
			</li>
			<li>
				<strong class="info-title" style="width: 78px;">Contact:</strong>
				<span class="info-data" style="width: 180px;">first last</span>
			</li>
			<li>
				<strong class="info-title" style="width: 78px;">Phone:</strong>
				<span class="info-data" style="width: 180px;">8675309</span>
			</li>
			<li>
				<strong class="info-title" style="width: 78px;">Mobile:</strong>
				<span class="info-data" style="width: 180px;">			<em class="muted">N/A</em>
</span>
			</li>
			<li>
				<strong class="info-title" style="width: 78px;">Email:</strong>
				<span class="info-data" style="width: 180px;"><a href="mailto:[email protected]">[email protected]</a></span>
			</li>
			
		</ul>

		<h4>Business Info</h4>
		<ul class="account-info-list unstyled no-bottom-margin">
			<li>
				<strong class="info-title" style="width: 80px;">Website:</strong>
				<span class="info-data" style="width: 178px;">			<em...

SCSS

body{
    position:relative;
}
header,
footer{
    background: #ccc;
    padding:40px 0;
    text-align:center;
}
header{
    margin-bottom: 10px;
}
#account-overview-container {
	 &.affix{
		top:10px;
        bottom:auto;
	 }
    
    &.affix-top{
		
	 }

	  &.affix-bottom{
		position:absolute;
		top:auto;
        bottom:140px;
	 }
}

.account-info-list{
	li{ 
            &:before,
            &:after {
            display: table;
            content: "";
            line-height: 0;
        }
            &:after {
                clear:both;
            }
	}

	.info-title{
		margin-right: 2px;
	}

	.info-title,
	.info-data{
		float:left;
	}
}

JavaScript

$("#account-overview-container").affix({
    offset: {
        top: $("header").outerHeight(true),
        bottom: $("footer").outerHeight(true)
    }
});