Stack 2 inputs inside an input group with icon using Bootstrap 4?

Question

I am using Bootstrap 3 and I have this result (see pic). Now I am upgrading to Bootstrap 4 but I have no Idea how to reach same result with Bootstrap 4.

Result:

<form class="form form-signup" name="form_details" action="" method="post">
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
        </span>
        <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Last" value="" />
        <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Name" value="" />
    </div>
    <label id="error" class="valid error" for="lastname" generated="true">
</div>

Answer 1

Use the flexbox utility classes to stack the inputs vertically inside the input group.

          <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-user"></i>
                    </span>
                </div>
                <div class="d-flex flex-column border rounded-right flex-grow-1">
                    <input type="text" class="form-control border-top-0 border-left-0 border-right-0 border-bottom" name="lastname" id="lastname" placeholder="Last" value="">
                    <input type="text" class="form-control border-0" name="firstname" id="firstname" placeholder="Name" value="">
                </div>
          </div>

https://www.codeply.com/go/rVedxTzrZv

Answer 2

In the latest ver of Bootstrap (4.3.1 at the time of writing) - Zim's solution broke to new lines when it shouldn't. I used this instead:

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-user"></i></span>
    </div>
    <div style="flex: 1 1 auto; width: 1%;">
        <input type="text" class="form-control border-top-0 border-left-0 border-right-0 border-bottom" name="lastname" id="lastname" placeholder="Last" value="">
        <input type="text" class="form-control border-0" name="firstname" id="firstname" placeholder="Name" value="">
    </div>
</div>

This makes the append/prepend work exactly like the standard Bootstrap ones. Better to add the styling to a class, of course.