body {
    background-color: green;
}

.idxQuestion {
    font-size: 36;
    text-align: center;
}

.idxButtons {
    margin-top:60px;
    margin-left: auto;
    margin-right:auto;
    width:350px;
}

.buttonchoice1,.buttonchoice2
           {
    text-align: center;
    background:white;
    padding: 5px;
}

.buttonchoice1 {
    float:left;
    border:5px solid red;
}

.buttonchoice2 {
    float:right;
    border:5px solid blue;
}

.spanchoice1 {
    font-size: 30px;
}

.spanchoice2 {
    font-size: 10px;
}

<div class="idxQuestion">
    <h1>Big Question?</h1>
</div>
<div class="idxButtons">
    <h:button class="buttonchoice1" onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
            <span class="spanchoice1">No</span><br />
            <span class="spanchoice2">additional info 1</span>
        </h:outputText>
    </h:button>

    <h:button class="buttonchoice2" onclick="option2?faces-redirect=true" >
        <h:outputText>
            <span class="spanchoice1">Yes</span><br />
            <span class="spanchoice2">additional info 2</span>
        </h:outputText>
    </h:button>

</div>

<div class="idxButtons">
    <button class="buttonchoice1" onclick="option1?faces-redirect=true">
        <outputText escape=false>
           <span class="spanchoice1">No</span><br />
           <span class="spanchoice2">additional info 1</span>
        </outputText>
     </button>
    <button class="buttonchoice2" onclick="option2?faces-redirect=true">
        <outputText>
           <span class="spanchoice1">Yes</span><br />
           <span class="spanchoice2">additional info 2</span>
        </outputText>
     </button>
</div>

<div class="idxButtons">
    <div class="buttonchoice1">
        <h:button onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
        <span class="spanchoice1">No</span><br />
        <span class="spanchoice2">additional info 1</span>
        </h:outputText>
        </h:button>
    </div>
....