JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<label for="recommend">*How likely is that you would recommend freeCodeCamp to a friend?</label>
<div class="button-group">
 <div class="label-button"> 
  <label for="recommend">
    <input type="radio" id="recommend" class="input-box" name="recommend" value="definitely">
    Definitely
  </label>
 </div>
 <div class="label-button">
  <label for="recommend">
   <input type="radio" id="recommend" class="input-box" name="recommend" value="maybe">
   Maybe
  </label>
 </div>
<div class="label-button">
   <label for="recommend">
   <input type="radio" id="recommend" class="input-box" name="recommend" value="not-sure">
   Not sure
   </label>
  </div>
  </div>

CSS

#survey-form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}
.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.row > * {
  flex-basis: 50%;
  box-sizing: border-box;
}
.row label {
  text-align: right;
}
.input-field {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  height: 40px;
  width: 280px;
  border: 1px solid gray;
  border-radius: 2px;
}
.input-select {
  margin-left: 1em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  width: 100px;
  height: 40px;
  border: 1px solid gray;
  border-radius: 2px;
}
.button-group {
  padding-left: 0.5em;
}
form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}
.label-button {
  margin-bottom: 0.5em;
}