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" style="width: 50px;">
        </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 > * , .response-part > div > * {
  display: inline-block !important;
  vertical-align: middle !important;
}
.response-part > div:after {
  content:"";
  width:100%;
  height:3px;
  background:black;
  display:block;
  position:relative;
  top:-.2em;
}