html - Positioning of div's using css: layout issue with absolute positioned div -

the code below shows circle plus bar, built using previous post. problem i'm experiencing bar in practice has fixed height equal circle's height. guess because of absolute inline-block. however, seem need absolute inline-block because without them text placed below bar instead of inside it.

the problem i'm experiencing if text within text div not fit within bar (too text), text runs belows bar (so heigth of bar not expanding). second problem if there's little text within bar, bottom-half overlaps bar. how can adjust code these problems?

.tophalf {    width: 100%;    background: #f1f3f2 none repeat scroll 0% 0%;    padding: 5em;  }  .bar {    background: #333;    margin-left: 75px;    min-height: 150px;  }  .circle {    width: 150px;    height: 150px;    border-radius: 50%;    background: white;    box-shadow: 0 0 8px rgba(0, 0, 0, .8);    margin-left: -75px;    position: relative;    vertical-align: middle;    margin-right: 20px;    overflow: hidden;  }  .text {    margin-top: 1em;    position: absolute;    display: inline-block;    vertical-align: top;    color: #222;  }

<div class="tophalf">    <div class="container">      <div class="col-md-12">        <div class="bar">          <div class="circle"></div>          <div class="text">my text</div>        </div>      </div>    </div>  </div>    <div class="bottom-half"></div>

in code snippet text "my text" shows below bar, while shows inside bar in app. don't know cause. perhaps because of container div bootstrap, snippet doesn't perhaps process such.

browser not able adjust height of 'bar' because defining location 'text' using 'absolute'. can please update css style using below 1 , see if helps?

.circle {    width: 150px;    height: 150px;`    border-radius: 50%;    background: white;    box-shadow: 0 0 8px rgba(0, 0, 0, .8);    margin-left: -75px;    position: relative;    float: left;    vertical-align: middle;    margin-right: 20px;    overflow: hidden;  }  .text {    margin-top: 1em;    vertical-align: top;    color: #222;  }