CSS alignment of text of HTML INPUT radio element

Question

I have an input[type="radio"] element inside a block container of fixed width. The supporting text for the <input/> element does not fit in a single line, and falls over to two or more lines. For example:

div.leftBlock {
  position: relative;
  float: left;
  width: 275px;
}

<div class="leftBlock">
  <input type="radio" name="foo" value="bar" id="option" /> This is a rather long supporting text that does not fit in one line.
</div>

How would I be able to style the <input/> element (or its text) such that every other line the text falls to starts at the same indent level the first line does? The first line of text has to be at the same vertical level as the <input/> element.

Any help will be much appreciated.

Answer 1

The container could use positive left padding, and a negative text-indent.

.leftBlock {
    padding-left: 20px;
    text-indent: -20px;
}
.leftBlock input {
    width: 20px;
}

Here's an example

Answer 2

Here's one option:

<style>
div.leftBlock {
    position:relative; 
    float:left; 
    width:275px;
} 

.radio {
    float: left;
}

.radio_label {
    display: block;
    margin-left: 1.5em;
}
</style>
<div class="leftBlock">
    <input type="radio" name="foo" value="bar" id="option" class="radio"/>
    <span class="radio_label">
    This is a rather long supporting text that does not fit in
    one line.
    </span>
</div>

You turn the label into a floating block element with a left margin.

Answer 3

you can change vertical level of input by changing the attribute top in the class or id of that input, here the code is:

<style type="text/css">
    .main {
        height:50px;
        line-height:50px;
        font-size:25px;
        position:relative;
    }

    .rd {
        position:inherit;
        top:-2px;
    }
</style>

<div id="main">
    <input type="radio" id="rd" />
    This is a rather long supporting text that does not fit in one line.
</div>