Bootstrap alert automatically expanding dynamic width parent

I've tried a few solutions that I have found on stack overflow, such as display:inline-block and position:absolute; top:0; left:0; however none of them seem to fit my problem.

I'm trying to use JQuery to show and hide an error message based on the user input into the form on blur events, however, when the error is shown, the alert automatically expands the parent div, when I would prefer the width to stay the same and expand the parent downwards in height

register.php (trimmed)

<div class="form-group" style="margin-bottom:0px">
<!-- Password -->
<div class="input-group">
    <div class="input-group-addon">
        <i class="fa fa-unlock" style="font-size:110%" aria-hidden="true"></i>
    </div>
    <label for="password" class="sr-only">Password:</label>
    <input class="form-control" type="password" name="password" id="password" placeholder="Password" required>
</div>

<!-- Errors-->
<div class="alert alert-danger regError" id="nameInvalid" style="display:none;">
    Invalid Name: Must contain both your first name and last
    name, and consist of only alphabetic characters, dashes and
    apostrophes.
</div>
<div class="alert alert-danger" id="numberInvalid" style="display:none">
    Invalid Student Number: Student Number must seven digits.
</div>

<!-- Register Button -->
<div style="margin-top:5%">
    <button type="submit" class="btn btn-success pull-right">Register</button>
</div>
</div>

style.scss

html{
    min-height: 100%;
    position: relative;
}

body{
    height: 100%;
}

//Login & Register
body.login{
    background-color: $colour1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#login-box{
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    background-color: $colour4;
    padding-bottom:2%;
    padding-left:2%;
    padding-right:2%;
    border-radius: 5px;
    position: relative;
    max-width: 450px;
    display:table;

}

.input-group-addon{
    width: 18%;
}

.input-group{
    width:100%;
}

.regError{
    margin-top: 5%;
    width: 100%;
    display:inline-block;
}