I'm creating a screen with bootstrap that will have several items panel just the way I did, it's all left well adjusted on the screen if the content has the same height, something that will not always happen, as in the example. How do I fix this?
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 1
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 2
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 3
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 4
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 5
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Titulo XYZ 6
</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum neque et tempore sint quos earum architecto delectus debitis ut sunt, iusto dolorum, dolor repellendus saepe vel exercitationem eveniet fugiat laboriosam.</p>
</div>
</div>
</div>
</div>
Follow the example by running on jsfiddle
