JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="main">
    <div id="sidebar">
        側邊<br>側邊<br>側邊<br>側邊<br>側邊<br>
        側邊<br>側邊<br>側邊<br>側邊<br>側邊<br>
        側邊<br>側邊<br>側邊<br>側邊<br>側邊<br>
    </div>
    <div id="content">
        <div class="row">
            <div class="col-md-12">
                1 請問這一塊為什麼會跟側邊同高？
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                2
            </div>
            <div class="col-md-4">
                3
            </div>
            <div class="col-md-4">
                4
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                5
            </div>
            <div class="col-md-4">
                6
            </div>
            <div class="col-md-4">
                7
            </div>
        </div>
    </div>
    <div style="clear:both"></div>
</div>
<div id="footer">
    底部
</div>

CSS

#sidebar {
    float: left;
    width: 200px;
    background-color: red;
}
#content {
    margin-left: 200px;
    background-color: green;
}
#footer {
    color: white;
    background-color: blue;
}
.row {
    border: 1px solid #fef;
}