Here is the code snippet I'm using:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
This markup looks good initially, as shown here: https://i.sstatic.net/lKotY.jpg
However, when I resize the browser window, the layout breaks and appears like this:
https://i.sstatic.net/QkH16.jpg
The "image" and price elements are no longer aligned next to each other. Any suggestions on what might be causing this issue in my code?
Thank you!