After trying different methods, I realized that adding margins to the left divs instead of the right ones achieved the desired spacing. Yet, I can't help but feel like this might not be the most ideal solution. If you have any other suggestions on how to achieve this layout, please let me know.
Here is the issue at hand:
Below is the code snippet that currently works for me:
(I made adjustments by adding right and bottom margins)
<div style="float:left;width:300px;text-align:center;margin-right:20px;margin-bottom:20px">
<div style="background-color:red">Hello Hi. One Two</div>
<div style="background-color:green">Hello Hi. One Two</div>
</div>
<div style="float:left;width:300px;text-align:center;">
<div style="background-color:aqua">Hello Hi. One Two</div>
<div style="background-color:pink">Hello Hi. One Two</div>
</div>
When resizing the screen horizontally to mimic a phone size, the items on the right stack under the left set, as intended.
For larger screens like computers, I want to create space between the sets while ensuring they align properly when resized. This proves to be challenging for me. Currently, the alignment looks something like this upon resizing:
_____
______
The first line represents the first set of divs, and the second line represents the second set. The challenge lies in getting the second set to align with the first after creating the desired space.
My goal is to achieve the following alignment upon resizing:
______
______
This follows the format where the first set of divs has a space break followed by the second set that was originally on the right side.