JSFiddle - React, Tailwind, and code Playground

by operatino

HTML

<ul class="form_ul sel-relationship_ul">
    <li class="form_ul_li">
        <input id="selectedRelationshipType1" type="radio" name="selectedRelationshipType" class="irc">
        <span class="irc_l">
            <label for="selectedRelationshipType1">родственник</label>
            <select id="field_secLevelRelation" class="isl sel-relationship_isl" name="st.layer.secLevelRelation">
                <option value="" selected="selected">можете указать</option>
                <option value="5">брат</option>
                <option value="6">дядя</option>
                <option value="11">племянник</option>
            </select>
        </span>
    </li>
    <li class="form_ul_li"><input id="selectedRelationshipType2" type="radio" name="selectedRelationshipType" class="irc"><span class="irc_l"><label for="selectedRelationshipType2">однокурсник</label></span></li>
    <li class="form_ul_li"><input id="selectedRelationshipType3" type="radio" name="selectedRelationshipType" class="irc"><span class="irc_l"><label for="selectedRelationshipType3">лучший друг</label></span></li>
    <li class="form_ul_li"><input id="selectedRelationshipType4" type="radio" name="selectedRelationshipType" class="irc"><span class="irc_l"><label for="selectedRelationshipType4">коллега</label></span></li>
    <li class="form_ul_li"><input id="selectedRelationshipType5" type="radio" name="selectedRelationshipType" class="irc"><span class="irc_l"><label for="selectedRelationshipType5">одноклассник</label></span></li>
    <li class="form_ul_li"><input id="selectedRelationshipType6" type="radio" name="selectedRelationshipType" class="irc"><span class="irc_l"><label for="selectedRelationshipType6">друг</label></span></li>
</ul>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

.irc { /* input radio and checkbox */
            float: left;
            margin-top: 2px;
            margin-right: 5px;
            *margin-top: -1px;
            *margin-right: 0;
            font-size: 12px;
            line-height: 18px;
            }

            .ie9 .irc,
            .ie8 .irc { /* input radio and checkbox */
                margin-top: -1px;
                margin-right: 0;
            }

        .irc_l { /* input radio and checkbox label (not actual HTML tag label) */
            overflow: hidden;
            display:  block;
            *display: inline; /* for ie6 and ie7 */
            *zoom: 1; /* for ie6 and ie7 */
            font-size: 12px;
            line-height: 18px;
            }

.isl {/* select list */
            width: 100%;
            border: #ccc solid 1px;
            border-top: #999 solid 1px;
            background: #fff;
            color: #333;
            font: 12px/12px Arial, Helvetica, sans-serif;
            }

        .ie9 .isl {
            margin-bottom:  1px;
            }

.form_ul {
    position: relative;
    top: -1px;
    padding: 5px 0 0;
    margin: 0 0 -5px 0;
    }
 
    .form_ul_li {
        list-style: none;
        margin: 0 0 5px 0;
        }
.sel-relationship {}

.sel-relationship_ul .irc_l {
    overflow: visible;
} 

    .sel-relationship_isl {  
        position: relative;
        width: auto;
        vertical-align: bottom;
        margin-left: 15px;
        margin-bottom: -5px;
    top: -5px;
        }

@media all and (resolution = 0dpi) {
.sel-relationship_isl {  margin-bottom: 0; top: -1px; }
}

     *HTML .sel-relationship_isl {  
            top: 5px;
            left: 45px;
            }

        *+HTML .sel-relationship_isl {  
            top: -3px;
            left: 15px;
            }