how to make font awsome icon and control in same row-CodePudding

i have a font awsome search text box in grid table header header, but unfortunately below code making control and icon in separate lines, how can i solve this

 <table >
                                <thead>
                                    <tr>
                                        <th>
                                          <input  type="text" placeholder="Search"  aria-label="Search">
                                            <span >
                                                <i  aria-hidden="true"></i>
                                            </span>
                                        </th>
                                    </tr>
                                </thead>
 </table>

CodePudding user response：

you need to use display as inline-flex in the th tag like style="display:inline"

CodePudding user response：

CSS property "display: flex" to make the font awesome icon and input control in the same line

<th>
        <div style="display: flex;">
          <input  type="text" placeholder="Search" aria-label="Search">
          <span  style="margin-left: 10px;">
            <i  aria-hidden="true"></i>
          </span>
        </div>
      </th>