CSS: Form Input Textbox Size Changing after Failed Login

I'm developing a Java Spring Boot Web App, but CSS is not my specialty. I've attached two images. One is the login page before an attempted login, and the next is after a failed attempted login. The issue is that after the text showing the failed login is added to the page, for some reason, the size of the input fields gets larger. I'm not sure why this is, but I've attached both the HTML and CSS for the relevant tags below:

<div id="parentLogin">

    <div class="row">
        
        <div class="col-md-12 col-md-offset-2">
        
            <div>
                <c:if test="${param.error != null}">
                    <div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
                </c:if>
            </div>
    
            <div class="panel panel-default" style="width: 275%;">
    
                <div class="panel-heading">
                    <div class="panel-title" style="text-align: center; font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        
                        <button type="submit" class="suit_and_tie">Sign In</button>
                        
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>

</div>

#profileAbout, #parentLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

.login-error {
    margin-top: 10px;
    margin-bottom: 10px;
    color: red;
    font-weight: bold;
}

Thank you in advance for the help!

Solution

The parent container .row doesn't have a specified width. This allows content inside of the container to take up space as it needs. When the login error message text is introduced, the <input> elements widen as the text from error message is filling the entire width of the parent container.

Try this. I gave .row a specific width and updated some CSS to mimic the photos you included. Now, with or without the error message text, your .row container with login content will always be 240px wide or whatever width you'd like.

#profileAbout, #parentLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

.row {
  width: 240px;
  padding: 10px;
}

.panel-body {
  width: 100%;
}

input {
  width: 95%;
  margin: 3px;
  height: 25px;
}

.panel-title {
  text-align: center;
  margin: 5px;
}

.suit_and_tie {
  background: #FFF;
  margin-top: 5px;
  border-radius: 500px;
  border: 1.5px solid #000;
  padding: 5px 25px 5px 25px;
}

.login-error {
    margin-top: 10px;
    margin-bottom: 10px;
    width: auto;
    color: red;
    font-weight: bold;
}

<div id="parentLogin">

    <div class="row">
        
        <div class="col-md-12 col-md-offset-2">
        
            <div>
                <c:if test="${param.error != null}">
                    <div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
                </c:if>
            </div>
    
            <div class="panel panel-default">
    
                <div class="panel-heading">
                    <div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        
                        <button type="submit" class="suit_and_tie">Sign In</button>
                        
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>
</div>