Bootstrap 4 Input resize behaviour - html

Question

I'm having an issue with an input inside a Bootstrap card. I want it to behave as the button on the second card, but somehow it shrinks and stays in-line. I tried adding some min-width or fixing its width but can't make it work with the responsive behaviour of the button that stacks on top of the other on certain screen width and also shrinks and expands.
Here is the code on Bootsnipp and a screenshot of the issue:
Edit: Adding my code in the post as requested: This is the first card, the one with the input.
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">
Product title
</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="form-row">
<div class="col">
<select class="form-control btn-block">
<option>50</option>
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
</select>
</div>
<div class="col">
Add to cart
</div>
</div>
</div>
</div>
</div>

Answer 1

Just change the wrapper columns to col-12 use the 12 available ones, and add some margin bottom to the select with mb-3. The next code modification should work, i have tested it on your code:
<div class="form-row">
<div class="col-12 mb-3"> <!-- changes here ... -->
<select class="form-control btn-block">
<option>50</option>
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
</select>
</div>
<div class="col-12"> <!-- ... and here -->
Add to cart
</div>
</div>