Bootstrap buttons inline on mobile

Question

I am trying to get two buttons on the same line on mobile. The buttons are on the same line for the desktop but as soon as it goes mobile they stack on top of each other. I have tried adding an inline-block tag to the div class but they still stacked, albeit at the correct 50 50 size.

Here is my html:

<div class="buttonDiv">
        <div class="row">
        <div class="col-lg-6">
            <button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
        </div>

        <div class="col-lg-6">
            <button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
        </div>
    </div>
    </div> 

and here is the relevant CSS:

.buttonDiv{
    position:relative;
    bottom:90px;
    font-family: "Cabin Condensed";
    font-weight:700;
    display:inline-block;
}

#buttonCustom{
    position:relative;
    margin-bottom:10px;
    height:10%;
    width:100%;
}

Answer 1

css looks like an overkill, unless OP solves some other design task (s)he didn't mention in the question.

If all you want is to keep 2 buttons inline on any device you can get away with...

<div class="row">
    <div class="col-xs-12">
        <button class="btn btn-primary">SIGN UP</button>
        <button class="btn btn-primary">CHECK STANDINGS</button>
    </div>
</div>

... and no additional css required.

fiddle.