How to align text outside a legend in a set of fields

Question

I want to align text outside an element legend, but I cannot figure out how to calculate the width legend.

This example works exactly the way I want, but it uses hardcoded top and left sizes. This is interrupted as soon as the width changes legend. Is there an easy way to do this? (Latest browsers are fine. No need to support older versions):

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend
        <span style="position:absolute; top:0; left:180px;">Aligned Text</span>
    </legend>
    text text text
</fieldset>

http://jsfiddle.net/JS6dP/

Answer 1

Wrap the tags spanaround the legend text of the legend of the legend in the tag legend, and another span tag position:absoluteand display:inline-blockthem.

<fieldset>
    <legend style="">
        <span style="border:3px solid red; display:inline-block;">Legend legend legend</span>
        <span style=" display:inline-block;"><span style="position:absolute; top:0px; padding-left:5px; ">Aligned Text</span></span>
    </legend>
    text text text
</fieldset>

Demo

Answer 2

- position:relative legend position:absolute span.

: http://jsfiddle.net/JS6dP/14/

, right, , width span.

HTML:

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend legend
        <span class="legendText">Aligned Text</span>
    </legend>
    text text text
</fieldset>

CSS:

legend { position: relative; }
.legendText { 
    display: inline-block;
    position: absolute;
    width: 92px;
    top: -16px;
    right: -96px;
}

, .

Answer 3

- , , -.

, peticular, hx, .

hx , :)

<fieldset>
    <h1 class="legend">
        Legend legend legend
        <span>Aligned Text</span>
    </h1>
    text text text
</fieldset>

fieldset {
  margin-top:1.25em;/* if no legend, increase margin-top*/
}
h1.legend {
  font-size:1em;
  display:table;/* to shrink on its content */
  margin-top:-1em;/* go up where legend stands usally */
  background:white;/* hide fieldset beneath */
  border:solid red;
}
.legend span {
  position:absolute;
  margin:-0.7em 0 0 0.5em;/* climb a little more */
  /* no coordonates needed, it shows where it is suppose too */
}

: http://codepen.io/anon/pen/wirLd