CSS Alignment

Attached please find an image.  I'm not sure how to align something.  In the CSS definition,
.controls div.error::before creates the arrow.
 .controls div.error controls the text.  I want the text to be flush left, like in the attached image.  How do I do that?

.controls div.error::before {
    border-top: 11px solid transparent;
    border-left: 11px solid #ff6c0f;
    border-bottom: 11px solid transparent;
    content: "";
    font-size: 0;
    height: 0;
    line-height: 0;
    margin: 0 0 0 11px;
    position: relative;
    top: -5px;
    width: 0;
}
.controls div.error {
    color: #ff6c0f;
    font-size: 14px;
    height: 14px;
    position: relative;
    right: -250px!important;
    top: 5px;
    height:20px;
    float:left;
    z-index: 1000;
}

Select allOpen in new window