JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container">
<div class="row">

    <div class="col-lg-2 title">

        <h2>Make a Gift:</h2>
        <p>Give Generously</p>

    </div>
    <div class="col-lg-10">


        <form class="form-inline ">



            <label class="sr-only">Donation Type</label>
            <select class="form-control my-1 mr-sm-2">
                <option selected>One Time Donation</option>
                <option value="1">Recurring Donation</option>
            </select>

            <label class="sr-only">Donation Amount</label>
            <input class="form-control my-1 mr-sm-2" type="number" placeholder="Donation Amount">

            <label class="sr-only">Choose Fund</label>
            <select class="form-control my-1 mr-sm-2">
                <option selected>Syria Emergency</option>
                <option value="1">Winterisation</option>
            </select>

            <button type="submit" class="btn btn-primary my-1">Donate Now</button>


        </form>


    </div>

</div>

CSS

.form-inline .form-control {flex-grow:1}