JSFiddle - React, Tailwind, and code Playground

by velthune

HTML

<table>
    <tr>
        <td class="first_column">Sign in</td>
        <td class="second_column">->(1)</td>
        <td class="third_column"><div class="translated">Some text</div></td>
    </tr>
</table>

CSS

.translated {
    color:green;
    font-weight:bold;
    vertical-align:middle;
    width:100%;
}

JavaScript

$(".translated").mouseover(function(){
    if ($(this).hasClass("editable")){
        return;
    }
    var h=$(this).height();
    var w=$(this).width();
    $(this).empty();
    var field = $("<input/>", {
        type: "text",
        value:$(this).text()
    }).appendTo(this);
    var button = $("<button>Login</button>").appendTo(this);
    button.css('width', field.width());
    $(this).height(h); 
    $(this).width(w);
    $(this).addClass("editable");
});