JSFiddle - React, Tailwind, and code Playground

HTML

<label class="font-weight-bold">Height</label>
<br>
<input type="text" data-custom = "." class=""  name="height" id="height" placeholder="">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="height_metric" id="height_metric1" value="cm" checked required>
<label class="font-weight-bold" class="form-check-label" for="height_metric1" >CM</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input"  data-custom = "." type="radio" name="height_metric" id="height_metric2" value="ft" required>
<label class="font-weight-bold" class="form-check-label" for="height_metric2">Feet</label>
</div>

</div>

JavaScript

$( "#height" ).attr('placeholder',$('#height_metric'.checked).val())
						$( "#height_metric" ).click(function() {
							$( "#height" ).attr('placeholder',$(this).val())
						});