css text alignment help

I recently found the CSS below that stylizes a checkbox for me. However, it places the label text below the checkbox circle, and I want to place it to the right of it. Can someone help me figure out what change(s) I need to make?

.roundedOne {
  width: 28px;
  height: 28px;
  position: relative;
  /*margin: 20px auto;*/
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
  background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOne label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #27ae60;
  background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
  background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
  opacity: 0;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label:hover::after {
  opacity: 0.3;
}
.roundedOne input[type=checkbox] {
  visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
  opacity: 1;
}

Select allOpen in new window

and the html:

<div class="roundedOne">
    <input type="checkbox" value="None" id="roundedOne" name="check" checked />
    <label for="roundedOne">label text</label>
 </div>

Select allOpen in new window