Can you figure out why the element with content is out of order compared to the other elements without content in the code below? This issue seems to disappear when all elements have content. Any insights on this peculiar behavior? (Thank you in advance for any help).
<style>
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
}
</style>
<div>
<div>
<button> </button>
<button> </button>
<button> </button>
</div>
<div>
<button> </button>
<button> X </button>
<button> </button>
</div>
<div>
<button> </button>
<button> </button>
<button> </button>
</div>
</div>