css selector with Nth and not

Question

I have a form with flexbox, only when an error is inserted div of alert, breaking the layout.

Have some fields that are 50% on the same line

<form method="post" action="XXX" class="form-login">
    @if($message = session('message'))
        <div class="alert-error">
            {{ $message }}
        </div>
    @endif

    <div class="form-group">
        <label for="">E-mail</label>
        <input type="email" name="xxx" value="{{ old('xxx') }}">
    </div>

    <div class="form-group">
        <label for="">Senha</label>
        <input type="password" name="xxx" value="{{ old('xxx') }}">
    </div>

    <button class="btn btn-logar">
        Logar
    </button>
</form>

And in the css have

 .form-login.form-group:nth-of-type(1),
 .form-login.form-group:nth-of-type(2) {
     width: 48.3%;
     flex: 1 0 auto;
 }

This happens because I’m using nth-of-type, what would be a workaround?

Answer 1

A simpler solution, not to use Nth-of-type, is to use the classes form-group that you already have in the field groups. Then your CSS would look like this:

.form-login .form-group {
    width: 48.3%;
    flex: 1 0 auto;
}

If you want to use Nth, it could be done like this:

.form-login .form-group:nth-of-type(n+1) {
    width: 48.3%;
    flex: 1 0 auto;
}