使跨度高度等于其父div的高度

Question

I want to change an element's height to make it match its parent's:

<div id="div-login-msg" class="alert">
    <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
    <span id="text-login-msg">Some message</span>
</div>

#icon-login-msg
{
    width: 30px;
    float: left;
    line-height: 28px;
    text-align: center;
    background-color: #dadfe1;
    margin-right: 5px;
    transition: all ease-in-out 500ms;
}

text-login-msg changes when the form is POSTed through AJAX:

fadeMessage: function ($msgId, $msgText, $divTag, $iconTag)
{
    var $msgAnimateTime = 150;

    $msgId.fadeOut($msgAnimateTime, function ()
    {
        $(this).text($msgText).fadeIn($msgAnimateTime, function ()
        {
            $iconTag.height($divTag.height()); // line I'm interested in
        });
    });
},

changeMessage: function ($divTag, $iconTag, $textTag, $divClass, $msgText)
{
    var $msgShowTime = 5000;
    var $msgOld = $divTag.text();
    MyNamespace.fadeMessage($textTag, $msgText, $divTag, $iconTag);

    $divTag.addClass($divClass);
    setTimeout(function ()
    {
        MyNamespace.fadeMessage($textTag, $msgOld, $divTag, $iconTag);
        $divTag.removeClass($divClass);
    }, $msgShowTime);
}

How could I change the mentioned line so that when the fade animation completes, $iconTag changes immediatly to $divTag.height? Using it as shown is way too slow.

Basically, what I want is $divTag.height === $iconTag.height

Please see this JSFiddle

Answer 1

What about?

#text-login-msg {
  display: block;
  height: 100%;
}

Answer 2

I ended up adding this:

#text-login-msg 
{
    display: flex;
}

And changing how the message is displayed to:

fadeMessage: function ($msgId, $msgText, $divTag, $iconTag)
{
    $msgId.text($msgText);
    $iconTag.css("line-height", $divTag.height() + "px");
},

The animation provided by transition: all ease-in-out alone is better than the kind of laggy animation done by .fadeIn and .fadeOut

See updated fiddle