How to make input (checkboxes) and label line up?

We have the following structure below for the html and it is resulting in the checkboxes showing in the same row.

How can we get each checkbox and label to show in just one row using a CSS solution?

Code

<script src="http://ift.tt/1oMJErh"></script>
<div class="list">
  <input type="checkbox">
  <label> value1</label>
  <input type="checkbox">
  <label> value2</label>
  <input type="checkbox">
  <label> value3</label>
  <input type="checkbox">
  <label> value4</label>
</div>

Goal/objective:

1. Without having to use extra HTML tags such as , make every checkbox and label show up in one row
2. a pure css solution