html - CSS positioning of error messages exactly above the input text box inline -

hi looking design css html pages , below m problem. have 2 text boxes side side put in inline container.

i validating inputs , want display error message above respective text box. so, have created spans , put them in inline-container of lesser height , thought of displaying. problem is:

case-1: validation message second text box shifts left if length of error message short. how avoid this?

case-2: if validation message input text box 1 long, making error message of text box 2 shift extreme right. in case, want validation message of text box 1 in multiple lines above area of text box 1

my html:

<div class="inline-container1">     <ul><li><span class="validationmessage"                 data-bind="validationmessage: firstname" /></li>          <li><span class="validationmessage"                 data-bind="validationmessage: lastname" /></li>     </ul> </div> <div id="name" class="inline-container">              <ul>         <li> <input id="firstname"                 name="firstname" type="text" class="required-input"                 placeholder="first name *" data-bind="value: firstname" />          </li>         <li> <input id="lastname"                 name="lastname" type="text" class="required-input"                 placeholder="last name *" data-bind="value: lastname" />         </li>     </ul> </div> 

my css:

.inline-container1 ul li{     display: inline;     list-style-type: none;     padding-right: 20px;     min-height: 10px;     margin: 0;     width: 230px; }  .inline-container1 {      }  .inline-container1 ul {     list-style-position: outside;     list-style-type: none;     padding: 0;     margin: 0; }       .validationmessage {     font-family: arial, sans-serif;     font-size: 12px;     color: #f00;      display: inline; } 

here fiddle created -> http://jsfiddle.net/moje/dtvkm/
fullscreen -> http://jsfiddle.net/moje/dtvkm/embedded/result/

html:

<div class="ctnr">     <span class="vmsg" data-bind="validationmessage: firstname">val. msg txtbox 1</span>     <span class="vmsg" data-bind="validationmessage: lastname" >val. msg txtbox 2</span> </div> <div class="ctnr">              <input id="firstname" name="firstname" type="text" class="required-input" placeholder="first name *"      data-bind="value: firstname" />     <input id="lastname" name="lastname" type="text" class="required-input" placeholder="last name *"      data-bind="value: lastname" /> </div> 

css:

body{font-family:sans;} .ctnr > *{ display: inline-block; width: 40%;} .vmsg{     display:relative;     top:-40px;     border:1px solid red;     color:red;     padding:2px; } input[type=text]{-webkit-appearance:none;outline:none;border:none;} #firstname{border:3px solid black;} #lastname{border:3px solid red;} 

you can tweak further suit needs.