I'm attempting to create a container with two elements inside: an <h2> and a <button>. I want them to be positioned on opposite sides (left and right) of the container. Currently, I've achieved this using absolute positioning for the child elements:
#header2{
position: relative;
padding: 0.4em;
color: white;
background-color: #CC3333;
min-height: 100px;
}
h2{
position: absolute;
display:inline;
}
#button{
position: absolute;
text-decoration: none;
vertical-align: middle;
padding: .1em;
width:100px;
height: 80%;
margin-right: 5px;
right: 0;
}
The issue arises when these elements overlap on smaller screens due to their absolute positions that ignore the layout flow. I am looking for a solution to align the elements oppositely while maintaining the flexibility of the div's layout flow.