Bootstrap 3 form validation image showing below the textbox[ when the input is valid ]

<p>I am creating a form using Twitter Bootstrap 3 with Jquery and PHP. every thing is working fine except when the user inputs text I want top show an image with a "tick" to show the user that the input was OK. The problem I have is the image is showing below the the text box instead of the right hand side of the textbox this is what I have if anyone can help me get this right. </P>

HTML``` <p><div class="form-group"> <label for="fname" class="control-label col-sm-2"> Family Name </label> <div class="controls col-sm-6"> <input type="text" class="form-control required" name="fname" id="fname" placeholder="Family Name"> </div>
</div> <div class="form-group"> <label for="email" class="control-label col-sm-2">Email Adress </label> <div class="controls col-sm-6"> <input type="text" class="form-control required" name="email" id="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="comment" class="control-label col-sm-2">Comment </label> <div class=" controls col-sm-6"> <textarea name="comment" class="form-control required" name="comment" id="comment" rows="6" placeholder="comment"></textarea>
</div> </div>

<div class="form-actions">
<div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary">Submit Form</button> </div> </div>

</form> </p>

CSS```
<p>
  label.valid {
    width: 24px;
    height: 24px;
    background: url(img/Done.png) center center no-repeat;
    display: inline-block;
    text-indent: -9999px;
 }
    label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
</p>```

JAVASCRIPT``` <p>$(document).ready(function () {
     $('#contact-form').validate({
       rules: {
            name: {
            minlength: 2,
            required: true
        },
            fname : {
            minlength: 2,
            required: true

        },
            email: {
            required: true,
            email: true
        },
            comment: {
            minlength: 2,
            required: true
        }
    },
    highlight: function(element) {
    $(element).closest('.form-group').removeClass('success').addClass('error');
        },
         success: function(element) {
      $(element)
      .text('OK!').addClass('valid')
      .closest('.form-group').removeClass('error').addClass('success');
    }
    });
    }); // end document.ready
</p>```