JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>
    
<label for="value_input">&euro;</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?" 
	onclick="document.getElementById('value_radio').checked=true">
 
<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>
            
<script>
	$('input[name="price"]').change(function () {
		if($("#value_radio").is(':checked')) {
			$('#value_input').attr('required', true);
		} else {
			$('#value_input').removeAttr('required');
		}
	});
</script>

CSS

#value_input[required] {
    background: #FFAAAA;
}