Q:

Bootstrap alert with pseudo before align with many lines message

I have Bootstrap 3 alert with icons. I used an icon font to maintain the icons. When the alert message length represented in one line, I have no issue, but when it exceeds one line I have an issue with the alignment of the icon. The following screen shot demonstrates the issue:
 
What I need to have, in the second box, the maroon line should starts and ends on the horizontal borders of the box and the text going to be on the right. In other words, as the text lines increased , the height of the maroon border increases too and the icon vertical align kept on the middle.
Here is the HTML:
<div class="alert alert-warning">
      <h4>This property contains system-sensitive properties. Do not use it unless you are well aware of their requirements and results. </h4>
</div>

And here is all CSS rules related to `div alert:
 .alert-warning {
        padding-left: unset;
    }

    .alert {
        padding: 0 5px;
    }

    .alert-warning {
        background-color: #F8AA5D;
        border-color: #f7864e;
        color: #795548;
    }

    .alert {
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .alert, .thumbnail {
        margin-bottom: 20px;
    }
.alert-warning:before {
    display: inline-block;
    font-size: 320%;
    font-family: fox;
    text-align: center;
    padding: 0 10px;
    vertical-align: middle;
    border-right: 5px solid;
    margin: 0 10px;
.alert-warning:before {
    content: "\e817";
    color: #772953;
    text-shadow: 0 1px 5px rgba(185,74,72,.79);
}

And this is h4 CSS:
.alert h4, .alert h5 {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.alert h4 {
    color: inherit;
}

.alert h4 {
    margin-top: 15px!important;
}

A:

This may not be what you're after because it's not necessarily 'bootstrap'... but sometimes frameworks like bootstrap (as great as they are) can complicate the simplest of things.
What you've described is an ideal scenario for using flexbox.  This example below uses no bootstrap classes and just some simple flexbox CSS.  Your border will grow with the text because it's part of that container.  And since we're using flexbox, small messages can easily be centered vertically in the alert.
I've used a FontAwesome icon in this example because it was easy to include the library.  You could easily swap that out with your icon.
2 examples are in the snippet below. One short message and one long.

.customAlert {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  justify-content: center;
  margin-bottom: 12px;
}

.customAlertIcon {
  padding: 4px;
  flex-shrink: 1;
}

.customAlertMsg {
  padding: 4px;
  border-left: 2px solid #000;
  flex-grow: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="customAlert">
  <div class="customAlertIcon">
    <i class="fa fa-warning fa-2x"></i>
  </div>
  <div class="customAlertMsg">
    This is an alert message.
  </div>
</div>

<div class="customAlert">
  <div class="customAlertIcon">
    <i class="fa fa-warning fa-2x"></i>
  </div>
  <div class="customAlertMsg">
    This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. 
  </div>
</div>

