JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='firstsix'>
<div class='breedbox'>

<div class='minibreed'>image here</div>
<select class='breedpicker'>
<option>jjjj</option><option>uuu</option>
</select>

<div class='stagepick'>
Stage: <select class='stagepicker'>
<option>llll</option><option>55</option>
</select>
</div>

<div class='sexpick'>
Sex: <div class='male'>Male</div><div class='male'>Female</div>
</div>

<div class='shapepick'>
Shape: <div class='male'>Male</div><div class='male'>Female</div>
</div>

</div>
</div>

CSS

.firstsix {width:460px;height:300px;display:inline-table;vertical-align:top;border:1px dotted grey;margin-bottom:20px;}

.breedbox {height:160px;background-color:white;border:1px solid grey;border-radius:10px;padding:5px;margin:5px;cursor:pointer;font-size:14px;position:relative;}

.minibreed {position:absolute;top:10px;left:10px;width:170px;height:100px;border:1px dashed blue;}
.breedpicker {width:170px;position:absolute;top:120px;left:10px;}

.stagepick {text-align:right;border:1px dashed green;width:230px;height:35px;position:absolute;top:10px;left:200px;}
.stagepicker {width:110px;}

.sexpick {text-align:right;border:1px dotted green;width:230px;height:35px;position:absolute;top:60px;left:200px;}
.male {border:1px solid red;border-radius:5px;padding:5px;width:50px;height:25px;margin:0px 5px;display:inline-table;vertical-align:top;}

.shapepick {text-align:right;border:1px dotted green;width:230px;height:35px;position:absolute;top:110px;left:200px;}

JavaScript

$('.btnsex').click(function(){ sex = $(this).data('sex'); } // only shape is visible, no need to update pic
	$('.btnshape').click(function(){ shape = $(this).data('shape');  }
	$('#breedpicker').change(function(){ breed = $('#breedpicker option:selected').text();  }
	$('#stagepicker').change(function(){ stage = $('#stagepicker').val();  }