How to make a css 'snail'?

Question

I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?

Here is a picture

fiddle

<div class="header">
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
    <p class="headingText">Hello</p>
</div>

.i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.headingText {
    color: white;
    background: black;
    display: inline-block;
    width: 350px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

Answer 1

Using pseudo-classes and absolute positioning you can get the effect you want.

The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.

You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.

.header {
  position: relative;
  display: inline-block;
  margin: 30px;
  overflow: visible;
}
.header img.i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  bottom: 16px;
  left: -40px;
  z-index: 1;
  overflow: hidden;
  border: 3px solid black;
}
.header p.headingText {
  padding: 16px 32px 16px 80px;
  color: black;
  border: 3px solid black;
}

<div class="header">
  <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
  <p class="headingText">Hello</p>
</div>

Answer 2

You could try something like this:

.header
{
  padding-top:26px;
  padding-left:40px;
  position:relative;
}
.i
{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  top:0;
  left:0;
}

.headingText
{
  color:white;
  background:black;
  display:inline-block;
  width:350px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
}