JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="gender" class="form-inline">
  <div class="form-group">
    <label for="">I Sign up as</label>
    <input #id="place" type="text" class="form-control" readonly/>
    <div class="radio-inline">
      <label class="label_item" for="radioMale">
        <input type="radio" class="radio_item" value="male"  name="gender" id="radioMale">
      </label>
      <p class="text-center colorGrey">Male</p>
     </div>
    <div class="radio-inline">
      <label class="label_item" for="radioFemale">
        <input type="radio" class="radio_item" value="female"  name="gender" id="radioFemale">
      </label>
      <p class="text-center colorGrey">Female</p>
    </div>
    <div class="radio-inline">
      <label class="label_item" for="radioKids">
        <input type="radio" class="radio_item" value="Kids" name="gender" id="radioKids">
      </label>
      <p class="text-center colorGrey">Kids</p>
    </div>
  </div>
</div>

CSS

input[type="text"]{
  width: 200px;
}

JavaScript

$('#gender input').on('change', function() {
	var gender = $( this ).val();
   $("#place").val( gender );
});