Managing a website with numerous headlines can be a challenge. When a user clicks on a headline, a button located 10px to the left of the headline should appear. However, the catch is that the headlines must always remain centered, regardless of whether the button is displayed or hidden.
<html>
<head>
<style type="text/css">
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
}
</style>
</head>
<body>
<div class="headline">Headline 1</div>
<div class="headline">Headline 2</div>
</body>
</html>
For those who are interested, a working example can be viewed on Fiddle: https://jsfiddle.net/ct11gp3v/
Various attempts have been made using position absolute, but so far without success. Any suggestions or solutions would be greatly appreciated. Thank you!