Home>

The form is made with rails.
The p tag is put in the supplementary meaning under the radio button, but it doesn't break the line with the radio button. I tried margin and br tags, but it didn't work. For example, if you write several br in a row, it will surely go down, but it is a taboo in the html world.
If i say this, how can you get the p tag to wrap around?
By the way, bootstrap is used, and the appearance of radiobutton is also messing with cdd.

code
    <label>
    <% = f.radio_button: foobar, "foo"%>foo</label>
    <label>
    <% = f.radio_button: foobar, "ba"%>ba</label>
    <label>
    <% = f.radio_button: foobar, "r"%>r</label>
    <p>foo: hogehoge<br>
    ba: hogehogehoge<br>
    r: hogehogehogehoge</p>
css
input [type = radio] {
    display: none;/* Hide radio button * /
}
input [type = "radio"]: checked + label {
    background: # 31A9EE;/* Specify background color when mouse is selected * /
    color: #ffffff;/* Specify the font color when the mouse is selected * /
}
.label: hover {
    background-color: # E2EDF9;/* Specify the background color when the mouse is over * /
}
.label {
    display: block;/* Make block level element * /
    float: left;/* Specify the left alignment/wraparound of the element * /
    margin: 5px;/* Specify the margin outside the box * /
    width: 100px;/* Specify the width of the box * /
    height: 45px;/* Specify the height of the box * /
    padding-left: 5px;/* Specify the left margin in the box * /
    padding-right: 5px;/* Specify the right margin in the box * /
    color: # b20000;/* Specify font color * /
    text-align: center;/* Specify text centering * /
    line-height: 45px;/* Specify line height * /
    cursor: pointer;/* Specify the shape of the mouse cursor (link cursor) * /
    border: 2px solid # 006DD9;/* Specify the border of the box as a solid line * /
    border-radius: 5px;/* Specify rounded corners * /
}


Current status

Ideal