Border for elements which are inline

Question

I have to apply a border for the div element. Since the div element is inline the border is overlapping.

Example fiddle link.

Expected output:

<span class="label_no" title="Label Editing not allowed">1.</span>
<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>

Need label & heading should be in the same line, and border for heading alone.

Answer 1

you can try this one:

      .Heading{
    font-family: Georgia,"New Century Schoolbook",serif;
    font-size: 1.4em;
    letter-spacing: 0.02em;
    line-height: 1em;
    display:inline;
    border:1px solid green;
    margin: 0;
    padding: 5px;
    position:fixed;
    top:0px;
}
.label_no{
    font-size: 1.5em;
    color:red;
}
}

DEMO

Or

One more Example:

DEMO

Answer 2

use this method add float:left for the label and display:table for the text - by setting display:table it takes the space available

.Heading {
  font-family: Georgia, "New Century Schoolbook", serif;
  font-size: 1.4em;
  letter-spacing: 0.02em;
  line-height: 1em;
  display: table;
  border: 1px solid green;
  margin: 0.5em 0;
  padding-top: 5px;
}
.label_no {
  font-size: 1.5em;
  color: red;
  float: left;
}

<span class="label_no" title="Label Editing not allowed">1.</span>

<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>
<span class="label_no" title="Label Editing not allowed">1.</span>

<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>
<span class="label_no" title="Label Editing not allowed">1.</span>

<div class="Heading">Heading Text Goes Here.....Heading Text Goes Here.....Heading Text Goes Here.....</div>