I am trying to create a nice looking `H2` heading in HTML and CSS that will allow me to have a nice formatted Number before the actual Heading text, as shown in the following image:

![enter image description here](https://i.stack.imgur.com/pjIiD.png)

The example in the image is using a CSS code like this below and it works great, except that I cannot set the number value in the orange circle in the HTML!

```css
h2:before {
  content: "2";
  text-align: center;
  position: relative;
  display: inline-block;
  margin-right: 0.6em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-weight: 900;
  line-height: 1.6;
  color: #FFF;
  font-size: 1em;
  background: #F77621;
}
```

```html
<h2>How to Get Detailed PPC Keyword Data</h2>
```

My other attempt is to Wrap the `h2` and a `span` both inside a `div`. The span is holding the number circle:

```css
.number-circles {
  margin-bottom: 0.4em;
}
.number-circles h2 {
  display: inline-block;
  font-size: 1.5em;
  text-transform: capitalize;
  line-height: 1.75em;
  color: #555;
}
.number-circles span.num {
  position: relative;
  display: inline-block;
  margin-right: 0.6em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  color: #FFF;
  font-size: 1em;
  background: #F77621;
}
/* added to show the issue */
.number-circles {
  max-width: 15em;
}
```

```html
<div class="number-circles">
  <span class="num">2</span>
  <h2>How to Get Detailed PPC Keyword Data</h2>
</div>
```

With this approach, I can set the value for the Number in the HTML. The problem I have is when the `h2` text is too wide for a single line, then it makes the whole thing go to a new line and does not remain on the line with the circle number span. This is bad! See image:

![enter image description here](https://i.stack.imgur.com/2fRll.png)

---

Can someone help me with a good solution that behave like the first one, where a wide h2 text will stay next to my number span?