JSFiddle - React, Tailwind, and code Playground

by robgallen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div data-bind="foreach: list">
    <!--ko if: $index() % 2 == 0 -->
    <div class="row">
        <div class="col-md-6">
            <span data-bind="text: Name"></span>
        </div>
        <div data-bind="with: $parent.list()[$index()+1]" class="col-md-6">
            <span data-bind="text: Name"></span>
        </div>
    </div>
    <!--/ko-->
</div>

CSS

.row { margin-bottom: 1em; }
.col-md-6 { position: relative; padding: 0 0.5em; width: 50%; }

JavaScript

var vm = {
    list: ko.observableArray([{
        Name: "One"
    }, {
        Name: "Two"
    }, {
        Name: "Three"
    }, {
        Name: "Four"
    }, {
        Name: "Five"
    }])
};

ko.applyBindings(vm)