div sizing is pushing the neighbouring divs in the wrong places - html

Question

I'm trying to figure out the best way to fix this problem. There are 4 divs, and when you shrink the browser window, the 3rd div appears on the right and the 4th div underneath. I know this is because the 1st div has more text, and an auto height means the height is larger than the other divs next to it. I don't want to give it a fixed height. Clearing the float on the 3rd div puts the 3rd div in the right place but the 4th div then sits below the 3rd div.
How can I make the 3rd and 4th divs sit next to each other when shrinking the browser window? And is there an easy way of making the 1st and 2nd divs the same height, even though the content is different in each div?
Thanks for the help!
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
float: left;
}
.title {
display: block;
}
a {
display: block;
}
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>

Answer 1

You can use clear:both on the third DIV:
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
float: left;
}
.title {
display: block;
}
a {
display: block;
}
.thing.thingy {
clear: both;
}
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
About the second question: You can use flex to achieve that: Wrap a container around everything and apply display: flex; and flex-wrap: wrap; to it:
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
}
.title {
display: block;
}
a {
display: block;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
<div class="wrap">
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
</div>

Answer 2

Use flexbox.
You'll need to put the .things in a container and set it to display flex. Remove the float and you're done. Easy.
Its supported by basically every modern browser including IE10 and up and it easy to implement. See this excellent guide to flexbox for tips.
.container {
display: flex;
flex-wrap: wrap;
}
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
}
.title {
display: block;
}
a {
display: block;
}
<div class="container">
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
</div>