Trying to center items within a div, but having issues achieving the desired output.
This is an image of the desired layout: https://i.sstatic.net/949al.png
The items in the div are aligning to the left and the input text does not stretch across the full width of the div. I also want to create space between the text and the gear icon on the orange buttons.
Below is the code snippet:
<af:dialog contentWidth="400" type="none" id="aaa" modal="true">
<div class="row">
<div class="col-md-8 sm-b-b">
<div class="sm-padding-5">
<af:inputText inlineStyle="display: inline-block;width:100%" value="sohoooooooooooooooooo"
simple="true" id="it1"/>
</div>
</div>
<div class="col-md-4 sm-b-b">
<div class="sm-padding-5">
<af:button inlineStyle="display: inline-block;width:100%" text="Search" id="b1"></af:button>
</div>
</div>
</div>
<af:forEach var="node" items="#{bindings.ViewObj11.collectionModel}">
<div class="row">
<div class="col-md-12 sm-b-b">
<div class="sm-padding-5">
<af:link text="#{bindings.Value1.inputValue}" styleClass="btn btn-primary white" id="ot1">
<span aria-hidden="true" class="fa fa-gear"></span>
</af:link>
</div>
</div>
</div>
</af:forEach>