css - Div shifting after ng-show using Bootstrap -

i have following:

when click on picture on right, following:

the 2 boxes should aligned, in first picture.

the containing div follows:

<div align="center" class="top-buffer">     <div class="img-thumbnail">       <img id="face-img" class="search-face" ng-src="{{faceimg}}">     </div>     <div class="overlaid img-thumbnail">       <img id="face-img" class="search-face" ng-src="{{processedresults[selectedsearchresultindex].img}}" ng-hide="showsearchresultdetails" ng-click="togglesearchresultdetails()">        <div class="search-face wrapword" ng-show="showsearchresultdetails" ng-click="togglesearchresultdetails()">         name: <strong>{{processedresults[selectedsearchresultindex].name}}</strong>       </div>        <span class="glyphicon glyphicon-info-sign overlayer text-primary" aria-hidden="true"></span>     </div>   </div> 

and custom css follows:

.search-face {     width: 100px;     height: 100px; }  .overlaid {     position: relative; }  .overlayer {     position: absolute;     top: 84px;     left: 85px;     text-shadow: 1px 1px #666666;     color: white; }  .wrapword {     white-space: -moz-pre-wrap !important;  /* mozilla, since 1999 */     white-space: -pre-wrap;      /* opera 4-6 */     white-space: -o-pre-wrap;    /* opera 7 */     white-space: pre-wrap;       /* css-3 */     word-wrap: break-word;       /* internet explorer 5.5+ */     white-space: -webkit-pre-wrap; /* newer versions of chrome/safari*/     word-break: break-all;     white-space: normal; }  .top-buffer {      margin-top: 10px;  } 

sorry blue scribble!

i'm using bootstrap 3.3.1

you code , fiddle not enought know want accomplish, maybe this

<div align="center" class="top-buffer">     <div class="col-sm-6 col-md-6 col-xs-6 text-right image-over">         <div class="img-thumbnail">             <img id="face-img" class="search-face" ng-src="{{faceimg}}">         </div>     </div>     <div class="col-sm-6 col-md-6 col-xs-6 text-left image-over">         <div class="overlaid img-thumbnail">             <img id="face-img" class="search-face" ng-src="{{processedresults[selectedsearchresultindex].img}}" ng-hide="showsearchresultdetails" ng-click="togglesearchresultdetails()">              <div class="search-face wrapword" ng-show="showsearchresultdetails" ng-click="togglesearchresultdetails()">                 name: <strong>{{processedresults[selectedsearchresultindex].name}}</strong>             </div>           <span class="glyphicon glyphicon-info-sign overlayer text-primary" aria-hidden="true"></span>         </div>     </div> </div> 

working fiddle http://jsfiddle.net/52vtd/9314/

also if uing bootstrap, please dont use align=center according html5 cr, requires continued support “obsolete” features, too, align=center attribute rather tricky.