How to create a circle and a bar that overlap with css?

Question

For a user profile I'm trying to create a circular image plus a horizontal bar with the same height as the image. Also, it should be responsive. It should look as in the image below. In the black bar there will be text.

Could someone please help me with the correct CSS?
So far I have the code below but this already goes wrong in that the black bar is below the circle and not next to it. But also I don't know how to make the black bar start exactly in the middle of the image, to have the image on top, and to have text in the black bar start sufficiently to the right (while being responsive to screen size).

<div class="col-md-12 profile-topbar">
  <div class="round">
    <img src=<%= image_path('profile.gif') %>>
  </div>
  <div class="text-bar">
    ...
  </div>
</div>

In my CSS file:

.round {
  margin: 2em;
  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: inline-block;
  background: #FFF;
  left: 222px; //Problem: not responsive. This block should start exactly halfway from the image.
  width: 100%;
}
.text-bar p {
  left: 250 px;
}

Answer 1

you could use figure and figcaption to structure your html.

Inline-block, vertical-align and margin to set image aside text

figure {
  margin-left:50px;/* half image width */
  background:black;
  box-shadow:0 0 1px;
  border-radius:3px;
  }
img {
  border-radius:100%;
  position:relative;/* brings it at front, can trigger z-index too */
  box-shadow:-1px 0 1px, 1px 0 1px white ;/* whatever U like */
  vertical-align:middle;
  right:50px;/* move visually from real position */
  margin-right:-40px;/* pull or push text aside */
  }
figcaption {
  display:inline-block;
  vertical-align:middle;
  color:white;
  }
p {
  margin:0;
  }

<figure>
  <img src="http://lorempixel.com/100/100/people/9" />
  <figcaption>
    <p>some text here  10px away from image</p>
    <p>and more</p>
    </figcaption>
  </figure>