Tengo los siguientes campos en un formulario y quiero que estén acomodados como en la imagen, pero no logro alinearlos ni poner los textos en esa forma, ademas quiero agregar otros campos debajo y que igual estén alineados de esa manera, como le puedo hacer con css? no estoy usando bootstrap
<f:view>
<h:form id="form_pruebas" class="form-horizontal">
<p:panel>
<div class="container">
<div class="form-group">
<h:outputLabel for="intentosAp" value="Intentos de aplicación" style="display: inline-block width: 70px"/>
<h:inputText id="intentosAp" value="" style="width: 60px;" required="true" maxlength="2"/>
<h:outputLabel for="intentosExi" value="Intentos exitosos:" style="display: inline-block width: 25px"/>
<h:inputText id="intentosExi" value="" style="width: 60px;" required="true" maxlength="3"/>
<h:outputLabel for="intentosFall" value="Intentos fallidos" style="display: inline-block width: 50px"/>
<h:inputText id="intentosFall" style="width: 60px;" value="" required="true" maxlength="3"/>
</div>
</div>
</p:panel>
</h:form>
</f:view>