JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item"><label>Text</label> <input type="text"/></div>
<div class="item"><label>Text</label> <input type="text"/></div>

CSS

label {
  vertical-align:top;
}

.wrap {
  display: inline-block;
}

JavaScript

$(".item input").mouseout(function(){
  if($(this).val() == ""){  
    if($(this).parent().hasClass("wrap")) return false;
    var wrap = jQuery("<div class='wrap'></div>");
    $(this).before(wrap);
    wrap.html($(this));
    $(this).after("<div>text text text</div>");
  }else{
    if($(this).parent().hasClass("wrap"))
    $(this).parent().before($(this)).remove();
  }
});