I'm looking to improve the overall layout of my webpage, but I can't seem to pinpoint exactly what it is that I need!
Imagine you have the following HTML structure:
<section>
<article>
<h1>Article Header</h1>
<p>Article content</p>
</article>
...
along with the following CSS styling:
section article {
width: 49%;
display: inline-block;
}
This set up displays the articles next to each other within the section, however, there are visible gaps between them due to varying sizes.
Is there a way to optimize the layout so that it fills all available space without any gaps?
If necessary, I'm open to incorporating jQuery or JavaScript solutions.
Here's a fiddle link for reference: