Full width input buttons on same line - input

Question

I'm trying to make two input buttons (yes/no) display on the same line with maximum width for both. I want the width of the buttons to scale down in size as the browser window size decreases.
http://jsfiddle.net/jasonniebauer/grQGP/1/
<div id="merchant_radio6">
<p>
Ever accepted credit cards before?
</p>
<div>
<input type="radio" id="yes" name="accept_cc"/>
<label for="yes">
Yes
</label>
<input type="radio" id="no" name="accept_cc"/>
<label for="no">
No
</label>
</div>
</div>
#merchant_radio6 input[type="radio"],
#merchant_radio7 input[type="radio"] {
display: none;
}
#merchant_radio6 input[type="radio"] + label,
#merchant_radio7 input[type="radio"] + label {
box-sizing:border-box;
padding: 1rem 3rem 1rem 3rem;
width: 100%;
display: inline-block;
color: #BDC3C7;
background-color: #F2F2F2;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 3px;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-webkit-transition-property: border, color, background-color;
-webkit-transition-duration: 0.25s, 0.25s, 0.25s;
-webkit-transition-timing-function: linear, linear, linear;
-webkit-transition-delay: initial, initial, initial;
transition: border .25s linear, color .25s linear, background-color .25s linear;
transition-property: border, color, background-color;
transition-duration: 0.25s, 0.25s, 0.25s;
transition-timing-function: linear, linear, linear;
transition-delay: initial, initial, initial;
}
#merchant_radio6 input[type="radio"] + label:nth-of-type(2),
#merchant_radio7 input[type="radio"] + label:nth-of-type(2) {
margin-left: 1rem;
}
#merchant_radio6 input[type="radio"]:checked + label,
#merchant_radio7 input[type="radio"]:checked + label {
background-color: #3498DB;
color: #FFFFFF;
outline: 0;
}

Answer 1

Set each button width to 50% and set them to float: left. If you want space between your buttons, you'll need to do something like width: 49%; margin-left: 1%;

Answer 2

Each button needs to be set to 50% width or less for them to appear on the same line. When width is set as a percentile, it uses the parent's width to calculate its own width - it makes no adjustments based on sibling elements' widths.
Edit: because you have margins set, these will need to be at <50% width. For most (all?) browsers, margins are calculated separately from width when considering display. E.g. an element that's 50% width and has a 10px margin on each side will take up more than 50% of its parent container's width. Note that some browsers might also treat borders this way.