Position Div over top right corner of input box

[The Curut]

I'm dynamically inserting DIV on a page, here is simplified example:http://jsfiddle.net/GEgEc/4/HTML:\[code\]<div class="left-column"> <p> <label>Company Name:</label> <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox" /> </p> <p> <label>Phone:</label> <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_PhoneNumberTextBox" __id="105" /> </p></div><div class="right-column"> <p> <label __id="109">Contact Name:</label> <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_ContactNameTextBox" __id="110" /> </p> <p> <label>Email:</label> <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_EmailTextBox" /> </p></div><div style="clear:both;"> <input type="submit" value="http://stackoverflow.com/questions/15605748/Submit Request" id="myButton" /></div>\[/code\]CSS:\[code\].inputError { border: 1px solid #006; background: pink;}.divError { border: 1px solid black; background: red;}label { float:left; width:120px; text-align:right; margin-right:5px;}input[type="text"] { width: 150px;}.left-column, .right-column { float:left; position: relative;}.left-column p, .right-column p { padding-bottom: 10px;}.left-column { margin-right:5px;}\[/code\]JS:\[code\]$(document).ready(function() { $("#myButton").on("click", DoTrick);});function DoTrick(){ var $input = $("#BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox"); var $div = $("<div/>") .attr("id", "GGG") .addClass("divError") .text("This field has error"); $div.insertAfter($input);}\[/code\]But ideally I'd like it work in general whenever I know input element I want to add DIV that shows on top right of it, this is validation message that should "float"Right now when I add DIV it breaks layout and doesn't go where I need it.