enter image description here

enter image description here I have made 2 divs (see screenshots). If the screen size goed under 750px, I want to make both divs max width so it would look nices. Here is the code of the divs.

<div >
            <div style="width: 45%; height: 225px;" >
                <div >
                    <div >
                        <h3 >Wallet</h3>
                    </div>
                </div>
                <div >
                    <div >
                        <table  style="font-weight: normal; margin-bottom: 0;">
                            <tr>
                                <th width="50%">Balance</th>
                                <td>&euro; {{ customer.balance | price }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


<div >
            <div >
                <div >
                    <h3 >Wallet Transactions</h3>
                    <div >
                        <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" ><i ></i>Add Credit</a>
                    </div>
                    <div >
                        <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" ><i ></i>Remove Credit</a>
                    </div>
                </div>
                <div >
                    <div >
                        <div >
                            <input type="search"  placeholder="Search"
                                   aria-controls="ticketsTable" id="search">
                        </div>
                    </div>
                </div>
            </div>

enter image description here

CodePudding user response：

change your html a little bit and take advantage of bootstrap, remove floats, use col classes

<div >
    <div style=" height: 225px;" >
      <div >
        <div >
          <h3 >Wallet</h3>
        </div>
      </div>
      <div >
        <div >
          <table  style="font-weight: normal; margin-bottom: 0;">
            <tr>
              <th width="50%">Balance</th>
              <td>&euro; {{ customer.balance | price }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h3 >Wallet Transactions</h3>
          <div >
              <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" ><i ></i>Add Credit</a>
          </div>
          <div >
              <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" ><i ></i>Remove Credit</a>
          </div>
        </div>
        <div >
          <div >
            <div >
              <input type="search"  placeholder="Search"
                      aria-controls="ticketsTable" id="search"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>