BootStrap: align img, span, div with border

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:700&amp;text=0123456789%2B%C3%B7%E2%88%92%C3%97"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
  <div class="response-part">
    <img src="foo1" />
    <span class="opensans">=</span>
    <div id="rp1" class="opensans inline" style="width: 50px;">
      <span class="opensans">X</span>
    </div>
  </div>
</div>
<div class="col-lg-2">
  <div class="response-part">
    <img src="foo2" />
    <span class="opensans">=</span>
    <div id="rp2" class="opensans inline" style="width: 50px;">
      <span class="opensans">X</span>
    </div>
  </div>
</div>
</div>
</div>

CSS

.opensans {
font-family: 'Open Sans', sans-serif, Verdana, sans;
font-size: 30px;
text-align: center;
}

.response-part {
display: table;
}
.response-part, .response-part > img, .response-part > span, .response-part > div, .response {
height: 45px;
}
.response-part > img {
display: table-cell;
vertical-align: middle;
}
.response-part > span {
display: table-cell;
}
.response-part > div, .response {
display: table-cell;
border-bottom: 5px solid black;
}

.inline {
display: inline-block;
}