Responsive 2 Column grid inside html - html

Question

I'm trying to make a 2 column row for a website. Each row should contain a youtube embedded video on the left side and a title, a paragraph, and PayPal button on the right side.
But whenever I resize the browser window these two columns are overlapping.
Please help!!!
Please check this link to find the page I'm working on:
https://aileyardim.org/qurban-en-1048.htm
<style type="text/css">.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<div>
<p>Through this project, our main target is to perform the Islamic ritual of Qurbani and provide meat for those who hardly can afford to have meat themselves – widowed women, orphaned children, refugees, and poor, elderly, or disabled people. When these people receive Qurbani meat, it fosters a real sense of hope for them and allows them to celebrate this occasion along with millions of other Muslims across the world.</p>
<p> </p>
<p>We also perform sacrifices on your behalf, whether it be as an aqeeqah or as a promise, we will fulfill it. Upon request, we can also organize an aqeeqah party on your behalf. Our team will sacrifice the cattle and distribute the meat to the neediest people, amongst the widows, orphans, and the needy – many of whom have not tasted meat in months</p>
<p>Our teams in Syria, Yemen, and in Turkey have sacrificed on behalf of the Muslims and shared meat to the needy families. Please donate generously and feed the needy today!</p>
</div>
<div class="row">
<div class="column"><iframe style="margin:10px;" width="553" height="301" src="https://www.youtube.com/embed/GHiDQoqM6pY" title="Give your Qurbani in Africa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p> </p>
</div>
<div class="column">
<h3 style="color:#3c649f">Qurbani in Africa</h3>
<p>Our brothers and sisters in Africa have suffered from continuous poverty and food crisis for decades. To fulfill the Islamic ritual of Qurbani and feed the poor and needy, our team is traveling to Tanzania. We will personally oversee the program and provide fresh meat to needy families. Beneficiaries will be meticulously selected based on need regardless of race or religion. We will hand deliver door to door and in public gathering. At the same time, we will also have the program in other regions, amongst them Chad, Burkina Faso, Kenya among others.</p>
<form action="https://www.paypal.com/donate" method="post" target="_top"><input type="hidden" name="hosted_button_id" value="3AQQU3WENKSEL" /><input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /><img alt="" border="0" src="https://www.paypal.com/en_NL/i/scr/pixel.gif" width="1" height="1" /></form>
</div>
</div>
<p> </p>
<div class="row">
<div class="column"><iframe style="margin:10px;" width="553" height="301" src="https://www.youtube.com/embed/iKbLIQl_-3M" title="Give your Qurbani in Africa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p> </p>
</div>
<div class="column">
<h3 style="color:#3c649f">Qurbani in Yemen</h3>
<p>The people of Yemen suffer from harsh economic conditions and food crisis. Thousands of children suffer from malnutrition. Families have forced to each grass and plant to keep up with the crisis. We are striving to support our families in Yemen through this difficulty. Our team in Yemen go to great lengths to ensure high quality animal is selected to ensure only the best quality meat reaches the plates of those who can only taste it once a year. Share the joy this Eid-ul-Adha.</p>
<form action="https://www.paypal.com/donate" method="post" target="_top"><input type="hidden" name="hosted_button_id" value="3AQQU3WENKSEL" /><input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /><img alt="" border="0" src="https://www.paypal.com/en_NL/i/scr/pixel.gif" width="1" height="1" /></form>
</div>
</div>
<p> </p>
<div class="row">
<div class="column"><iframe style="margin:10px;" width="553" height="301" src="https://www.youtube.com/embed/jeDeePATfc4" title="Give your Qurbani in Africa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p> </p>
</div>
<div class="column">
<h3 style="color:#3c649f">Qurbani in Afghanistan</h3>
<p>Afghanistan has suffered from decades of occupation and war. Its people bore severe poverty to the point where a father is forced to sell of him daughters as he is unable to feed them. We feel the pain of these families and pledged to stand by them. During Eid-ul-Adha, we share your sacrifices to the most needy. We carefully determine beneficiaries based on need, giving priority to widows and the disabled. We seek to share joy and brotherhood throughout the Eid-ul-Adha festivals.</p>
<form action="https://www.paypal.com/donate" method="post" target="_top"><input type="hidden" name="hosted_button_id" value="3AQQU3WENKSEL" /><input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /><img alt="" border="0" src="https://www.paypal.com/en_NL/i/scr/pixel.gif" width="1" height="1" /></form>
</div>
</div>
<p> </p>
<div class="row">
<div class="column"><iframe style="margin:10px;" width="553" height="301" src="https://www.youtube.com/embed/ndRXpDHEIP4" title="Give your Qurbani in Africa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p> </p>
</div>
<div class="column">
<h3 style="color:#3c649f">Qurbani in Syria</h3>
<p>Syria needs no introduction. After over a decade of suffering, families are slowing beginning to move on from the horrors of war. We aim to make the Eid-ul-Adha festivals special for them. Majority of the refugees in the IDP camps cannot afford to sacrifice an animal. We aim to share the vibe of the festival by sharing meat to the most needy families.
Be a part of this goodness and donate your qurbani.</p>
<form action="https://www.paypal.com/donate" method="post" target="_top"><input type="hidden" name="hosted_button_id" value="3AQQU3WENKSEL" /><input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /><img alt="" border="0" src="https://www.paypal.com/en_NL/i/scr/pixel.gif" width="1" height="1" /></form>
</div>
</div>
<h2>For your bank donations:</h2>
<p><strong>Account Name:</strong> Aile Yardimlasma Dernegi<br />
<strong>Branch:</strong> Esenyurt Istanbul<br />
<strong>Branch Code:</strong> 412<br />
<strong>SWIFT Code:</strong> TVBATR2A</p>
<div>
<table>
<tbody>
<tr>
<th style="padding: 7.5px;">Currency</th>
<th style="padding: 7.5px;">Account No.</th>
<th style="padding: 7.5px;">IBAN</th>
</tr>
<tr style="padding: 20px;">
<td style="padding: 7.5px; color: #000000;">Turkish Lira (TL)</td>
<td style="padding: 7.5px; color: #000000;">00158007308004989</td>
<td style="padding: 7.5px; color: #000000;">TR15 0001 5001 5800 7308 0049 89</td>
</tr>
<tr style="padding: 20px;">
<td style="padding: 7.5px; color: #000000;">US Dollar ($)</td>
<td style="padding: 7.5px; color: #000000;">00158048017278296</td>
<td style="padding: 7.5px; color: #000000;">TR96 0001 5001 5804 8017 2782 96</td>
</tr>
<tr style="padding: 20px;">
<td style="padding: 7.5px; color: #000000;">Euro (€)</td>
<td style="padding: 7.5px; color: #000000;">00158048017278306</td>
<td style="padding: 7.5px; color: #000000;">TR20 0001 5001 5804 8017 2783 06</td>
</tr>
<tr style="padding: 20px;">
<td style="padding: 7.5px; color: #000000;">GBP (£)</td>
<td style="padding: 7.5px; color: #000000;">00158048017278317</td>
<td style="padding: 7.5px; color: #000000;">TR14 0001 5001 5804 8017 2783 17</td>
</tr>
</tbody>
</table>
</div>
<div>
<p>When you donate please don't forget to mention the purpose of your donation in the description section of the transaction.</p>
</div>
<p> </p>
<h2>More from our previous years of Qurbani & Aqeeqah</h2>
<p> </p>
<iframe style="margin:10px;" width="460" height="259" src="https://www.youtube.com/embed/RT_OuU5iXc0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><iframe style="margin:10px;" width="460" height="259" src="https://www.youtube.com/embed/6wyGBakTOLY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><iframe style="margin:10px;" width="460" height="259" src="https://www.youtube.com/embed/u7pnKDU3E0Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><iframe style="margin:10px;" width="460" height="259" src="https://www.youtube.com/embed/LGOAueA19gg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p> </p>

Answer 1

These iframe width are 553px, so it will overlapping when .row width under 1106px(553*2).
Use max(), if .row > 1106px, .column = 50%. If .row < 1106px, .column = 553px.
With display: flex; & flex-wrap: wrap;, .column will wrap if .row don't have enough width.
.column {
width: max(553px, 50%);
}
.row {
display: flex;
flex-wrap: wrap;
}
.row:after {
content: "";
display: table;
clear: both;
}

Answer 2

Instead of using class="column" Please use class="col-12 col-lg-6" This will help to avoid overlapping. Its only for mobile view.
If you need for ipad like that pls use col-md and col-sm
Pls refer this https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp