CSS - Showing an error beneath an input - css

Question

I am looking to show an error message below a text input like so
The message should not extend any wider than the width of the input, so I was thinking could I inherit the width of the input on say a span that sits below it?
Something like:
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<p style="width:inherit;">Some Error Here</p>
</div>
My current attempt - http://jsfiddle.net/4eu2qkra/
I know this sample above will not work, and usage of inherit is wrong here since it will be looking to use the width of the parent div.
Is there a pure css way to inherit from a sibling element immediately before a target element? Maybe I'm going about this all the wrong way?!

Answer 1

Use your wrapper DIV to control the width of the input and the error message. Make sure that the input has width: 100%; so that it will fill the wrapper DIV.
<div class="control-wrap">
<input type="text">
<p>Error Message. Error Message</p>
</div>
* {
box-sizing: border-box;
}
.control-wrap {
width: 50%;
padding: 5px;
background-color: red;
border: 1px solid #666;
}
input {
width: 100%;
border: 1px solid #666;
}
p {
margin: 5px 0;
}
jsFiddle: http://jsfiddle.net/2krc8tyL/

Answer 2

You can wrap the input and error message in a div with display: table set on it, which will match the width of the largest child. This way it will adjust to the input's width.
.my-form-control-group {
display: table;
padding: 4px;
}
.my-form-control {
width: 250px;
border-width: 1px;
}
.my-form-control-group.has-error {
color:white;
border-color:red;
background-color: red;
padding: 1px 1px 4px 1px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" >
<div>Some Error Here</div>
</div>

Answer 3

The most obvious option is to use absolute positioning.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.my-form-control-group {
display: inline-block;
position: relative;
background: red;
padding: 4px;
}
.my-form-control {
border-width: 1px;
display: block;
}
.error {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: red;
color: white;
padding: 4px;
}
<div class="my-form-control-group has-error">
<input type="text" class="my-form-control" />
<p class="error">Some Error Here Lorem ipsum dolor.</p>
</div>