Mix inline and vertical Form in bootstrap

Question

I want to have something like this

so I did the following

   <div class="container">
    <div class="row">
        <div class="page-account-box">
            <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
                <div class="account-box">
                    <div class="picture_account">
                        <img src="~/images/d2.jpg" class="imgFormat " />
                    </div>
                    <div class="account-box-content mt-4">
                        
                        <h4>Register</h4>
                         <form method="post" class="form-group ">
                            <div class="row pt-2">
                                <div style="display:inline">
                                    <label>Name </label>
                                    <input type="text" class="col-md-4" id="FirstName">
                                </div>
                                <div style="display:inline">
                                    <label>Lastname </label>
                                    <input type="text" class="col-md-4" id="LastName">
                                </div>
                            </div>


                            <div class="row pt-2">
                                <div>
                                    <label>Email  </label>
                                    <input type="email" class="col-md-8" id="Email" />
                                </div>
                            </div>

                            <div class="row pt-2">
                                <div>
                                    <label>Mobile  </label>
                                    <input type="text" class="col-md-8" id="Mobile">
                                </div>
                            </div>                                
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

and this is the css

 .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        text-align: center;
        border-radius: 20px;
        display: inline;
        border: 2px solid black;
        width: 100%;
    }

 .page-account-box  .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 70px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}

but it becomes like this

how can I make that?