style label and checkbox when used together (Plunker attached)

http://ift.tt/1XIdSLh

Please refer to the plunker link. As per this, I want my checkbox to be on extreme left side and value 'Data:' to be on extreme right side at all times. I mean, even if we maximize, it should always be on extreme ends and not somewhere in between.

If you also noticed, the checkbox and value 'Data:' are not in the same line. Checkbox is a bit on upper side and value 'Data:' is only the lower side. How can I align them in the same line ?

Here is the code:

.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-controller="ModalDemoCtrl">
  <div class='main_div'>
    <div>
      <div class='rules'>
        <span>
          <input type="checkbox" />
          <label>Data:</label>
        </span>
      </div>
    </div>
  </div>
</div>