Can't get toggle buttons to float right - html

Question

I'm developing a Chrome Extension and I took some lovely toggle switches from this site to add to my main page.
Float right seems to have no effect on the toggles and I'd like to avoid using margins to position them. It would be nice if the toggles could line up under the third set of buttons above.
Any ideas?
<div class="row" id="row-6">
<div class="debug">
Debug Automation Chains
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="debug-switch">
<label class="onoffswitch-label" for="debug-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="row" id="row-7">
<div class="ui-dev-mode">
UI Development Mode
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="devmode-switch">
<label class="onoffswitch-label" for="devmode-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>`
`
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #8F8F8F; border-radius: 10px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 17px; padding: 0; line-height: 17px;
font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ENABLED";
padding-left: 10px;
background-color: #00a3db; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "DISABLED";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 9px; margin: 4px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 69px;
border: 2px solid #8F8F8F; border-radius: 10px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
`

Answer 1

It's difficult to help without a link and only some of your css. Could you try the following:
.row{
display: block;
float: left;
width: 100%;
}
.debug, .ui-dev-mode {
float: left;
}
.onoffswitch {
float: right;
}