title: Custom radio button using css
body: <p>I am trying to create the custom radio button as shown in the picture below.
  <a href="https://i.stack.imgur.com/3qO5J.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3qO5J.png" alt="enter image description here"></a></p>
  
  <p>I wrote the code and able to achieve the correct styling but not able to make the label appear before the radio buttons.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.lengend-action-buttons {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
  }
  label {
    font-weight: normal;
    font-size: 14px;
    Font-Family: Metric-Regular;
    Color: #666666;
    display: block;
    cursor: pointer;
  }
  [type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  [type="radio"] + span:before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.10em;
    border-radius: 1em;
    border: 0.35em solid #fff;
    box-shadow: 0 0 0 0.10em #36B18D;
    margin-right: 0.75em;
    transition: 0.5s ease all;
  }
  [type="radio"]:checked + span:before {
    background: #36B18D;
    box-shadow: 0 0 0 0.10em #36B18D;
  }
  [type="radio"]:focus + span::after {
    font-size: 1.2em;
    line-height: 1;
    vertical-align: -0.125em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="lengend-action-buttons lengend-action-buttons-first"&gt;
    &lt;label for="d3_graph_chart0011day"&gt;
      &lt;input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked"&gt;
      &lt;span&gt;1 Day&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="lengend-action-buttons lengend-action-buttons-first"&gt;
    &lt;label for="d3_graph_chart0017day"&gt;
      &lt;input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day"&gt;
      &lt;span&gt;7 Day&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="lengend-action-buttons lengend-action-buttons-first"&gt;
    &lt;label for="d3_graph_chart00130day"&gt;
      &lt;input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day"&gt;
      &lt;span&gt;30 Day&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="lengend-action-buttons lengend-action-buttons-first"&gt;
    &lt;label for="d3_graph_chart00190day"&gt;
      &lt;input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day"&gt;
      &lt;span&gt;90 Day&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me, resolve this issue.</p>