JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<div class="row equa">
<div class="col-sm-6 col-md-4 fixed-300" >
    <div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>@name@ </h2>
        </div>
        <div class="panel-body">
            <a href="@href@">
                <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSam-6XvHuS9wSHW5_TqX7cm9Db626iZgyBdpWSOp1d6fkWDvZZKw"  class="img img-responsive"/>
            </a>
        </div>
        <div class="panel-footer"> 
            <ul>
                <li> size : @fileSize@</li>
                <li> last modified : @lastModified@</li>
            </ul>
        </div>
    </div>
</div>

<div class="col-sm-6 col-md-4 fixed-300" >
    <div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>@name@ </h2>
        </div>
        <div class="panel-body">
<a href="@href@">
    <img src="http://i.stack.imgur.com/ILTQq.png"  class="img img-responsive"/>
</a>
                    </div>
        <div class="panel-footer"> 
            <ul>
                <li> size : @fileSize@</li>
                <li> last modified : @lastModified@</li>
            </ul>
        </div>
    </div>
</div>
</div>

CSS

.equal, .equal > div[class*='col-'] {  
    display: -webkit-flex;

}
.fixed-300 {
 	width: 300px;
}