JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='nest_egginfo_holder'>
  <div class='nest_egginfo_title'>
    <span class='nest_name{$aid}'>Name</span>
    <div class='nest_egginfo_hide'>[x]</div>
  </div>
  
<div class='nest_egginfo_half' style='padding:10px;'>

<div style='margin-bottom:15px;'>Believed to be a (sex) of the (breed) breed.</div>

<div class='nest_egginfo_detail'>Health: 100% / Good, description.</div>
<div class='nest_egginfo_detail'>Development: 26/40 / Good, description.</div>
<div class='nest_egginfo_detail'>Genetics not studied yet. <button id='nest_genetic_btn'>Examine</button><br><span id='nest_genetic_result'></span></div>

<div class='nest_egginfo_detail'>Rename? <input type='text' id='nest_rename_input' maxlength='30' value='{$name}'> <button id='nest_rename_btn'>Update</button><br><span id='nest_rename_result'></span></div>

<div class='nest_egginfo_detail'>Send to another Master? This will be free, immediate and maybe permanent, so be sure!<br>Master's name: <input type='text' id='nest_transfer_input' maxlength='30'> <button id='nest_transfer_btn'>Transfer</button><br><span id='nest_transfer_result'></span></div>

<div class='nest_egginfo_detail'>Change nest? <select id='nest_move_input'>
<option value='0'>Holding Nest</option>
<option value='1'>Some Nest</option>
</select> <button id='nest_move_btn'>Move</button><br><span id='nest_move_result'></span></div>

</div>

<div class='nest_egginfo_half'>

<div class='nest_egginfo_img'><img src='../../griffimage/{$aid}'></div>

<div class='nest_egginfo_detail'>Abandon? <span class='nest_name{$aid}'>{$name}</span> will become available for anyone to adopt. You may never get them back. Are you sure?<br><button id='nest_abandon_btn'>Abandon</button><br><span id='nest_abandon_result'></span></div>
</div> 



</div>

CSS

div {box-sizing:border-box;}
.nest_egginfo_holder {width:860px;background-image:url(https://orig00.deviantart.net/7246/f/2018/122/f/1/perchbg2_by_bronzehalo-dcagnjo.png);background-position:center top;background-repeat:no-repeat;background-color:white;border:1px solid grey;border-radius:10px;margin:auto;padding:10px;}

.nest_egginfo_title {font-size:28px;height:50px;border-bottom:1px dotted grey;}
.nest_egginfo_hide {float:right;}

.nest_egginfo_half {width:50%;display:table-cell;cursor:pointer;}

.nest_egginfo_img {width:400px;height:250px;border:1px dotted red;}
.nest_egginfo_detail {padding:5px;margin:10px auto;background-color:rgba(255,255,255,0.7);border:1px solid white;border-radius:5px;width:400px;}