JSFiddle - React, Tailwind, and code Playground

HTML

<script src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js'></script>
<footer>
    <div class="top">
        <div class="middle">
            <div class="left" data-bind='text:left'></div>
            <div class="center">-</div>
            <div class="right" data-bind='text:right'></div>
        </div>
    </div>
</footer>

CSS

footer{
    position:fixed;
    bottom:0;
    left:0;
    background-color:black;
    height:30px;
    width:100%;
    color:white;
}
.top{
    float:right;
    margin-right:20px;
    height:100%;
}
.middle, .middle>div{
    /*display:inline-block;*/
    /**/float:left;/*/ /*un comment this line and comment out the display to get correct behaviour*/
}

.left, .right{
    text-transform: uppercase;
}

JavaScript

var dataBind;
$(function documentready(){
    dataBind = {
        left: ko.observable('12 october'),
        right: ko.observable('2014')
    };
    
    ko.applyBindings(dataBind, $('footer')[0]); // commenting this line will also get the correct results.
})