title: css: how to display a radiobuttonlist horizontally?
body: <p>How can I align a radiobuttonlist horizontally? This one is to capture a gender value , male/female. I want to keep the name input css the same. This is the html:</p>
  
  <pre><code>&lt;label for="temp"&gt;Gender&lt;/label&gt;
  
  &lt;label for="one"&gt;Male&lt;/label&gt;
  &lt;input type="radio" id="one" name="first_item" value="1" /&gt;
  
  &lt;label for="two"&gt;Female&lt;/label&gt;
  &lt;input type="radio" id="one" name="first_item" value="2" /&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.grid-container {
      display: grid;
      grid-column-gap: 5px;
      grid-template-columns: auto auto;
      background-color: #2196f3;
      padding: 10px;
  }
  
  .left-griditem {
  }
  
  input,
  label {
      display: block;
  }
  </code></pre>
  
  <p>Here is a <a href="https://codepen.io/bertie2017/pen/WgdGBO" rel="nofollow noreferrer">codepen</a>. Currently the buttons are in a vertical position.</p>