html text input and checkboxes. css Issue -

edit: looks now: https://jsfiddle.net/vmd7m3yh/5/ it's better, definitely, need sort out how list inputs correctly.. kinda messy right now.

i running problem in html/css. trying make this:

the problem dont know how can align them way. have tried use float on the input , checkbox, checkbox pushed first label.

current situation:

https://jsfiddle.net/vmd7m3yh/

the css specific div @ bottom of file.

any idea should change? quite ashamed of asking question on html. please, nice :)

/*custom form*/    .workorder-form {    margin-bottom: 5px;  }    .workorder-form form {    margin-top: 15px;    width: 500px;  }    .workorder-form label {    margin-top: 5px;  }    .workorder-form input[type=text] {    float: right;    margin-top: 5px;  }    .workorder-form input[type=checkbox] {    background-color: yellow;  }    .workorder-form textarea {    width: 350px;    height: 200px;    padding-bottom: 5px;  }

<div class="workorder-form">    <form class="workorder-form">      <h4>@resources.workreport</h4>      <label>some label</label>      <input type="text" name="ordernumber" value="" />      <input type="checkbox" name="vehicle" value="bike">i have bike<br />        <label>some label</label>      <input type="text" name="phone" value="" />      <input type="checkbox" name="vehicle" value="bike">i have bike<br />        <label>some label</label>      <input type="text" name="email" value="" />      <input type="checkbox" name="vehicle" value="bike">i have bike<br />        <label>some label</label>      <input type="text" name="email" value="" />      <input type="checkbox" name="vehicle" value="bike">i have bike<br />        <label>some label</label>      <input type="text" name="email" value="" />      <input type="checkbox" name="vehicle" value="bike">i have bike<br />        <label>some label</label>      <input type="text" name="email" value="" />      <input type="checkbox" name="vehicle" value="bike">i have bike<br />        <label>some label</label>      <textarea name="email" value=""></textarea><br />      </form>  </div>

edit: looks now: https://jsfiddle.net/vmd7m3yh/5/ it's better, definitely, need sort out how list inputs correctly.. kinda messy right now.

your inputs big on fiddle, try adding

input {     height: 30px; } 

in css , see

edit : can add bootstrap external resource on left of fiddle instead of copying in css box :)