DevExtreme dxBox

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.3/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.3/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/14.2.5/js/dx.phonejs.js"></script>
<div class="container">
    <div data-bind="dxBox: { direction: 'col', width: '100%', height: '100%' }">
     <div data-options="dxItem: { baseSize: 100 }">
      <div data-options="dxItem: { ratio: 1 }" style="background-color: red;">&nbsp;</div>
     </div>
    
      <div data-options="dxItem: { ratio: 1 }" style="background-color: orange;">&nbsp;</div>
     </div>
    </div>
</div>

CSS

.container {
    height: 400px;
}

JavaScript

$(function() {
    ko.applyBindings();    
});