JSFiddle - React, Tailwind, and code Playground

HTML

<input name="location" type="text" id="location" maxlength="512" size="20" class="editable text"/><button id="flagit">Flag it</button>

CSS

input.editable {
    height: 18px;
    background-color: #FFFFCC;
    padding-top: 0px; 
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border:#FFFFCC 1px solid;
    margin:0px;
}

input.text {
    text-align:left;
    height:19px;
    width:100px;
}
.flagged {border: 1px solid red!important; background-color: #ddd!important;}

JavaScript

$('#flagit').click(function(){
$("#location").addClass('flagged');
});