Contained within the #search-bar div is a clickable image and an h1 element (unfortunately, I am unsure where to place the relevant image.. my apologies). My goal was to separate them as shown. I'm curious if there might be a simpler and more concise solution to reduce the amount of CSS code needed. Thank you.
#search-bar {
background: #C75000;
margin: 20px 90px 20px 75px;
padding: 1rem;
color:white;
}
#search-bar a, h1{
display:inline-block;
/* transform: translateX(50%); */
border: 5px solid black;
position: relative;
left: 200px;
}
#search-bar h1{
left:50px;
}
#search-bar a{
left:400px;
}<div id="search-bar">
<h1>Can I use?</h1>
<a href="https://www.amazon.com/">
<img alt="cog" src="cog-trans.png" width="30" height="30">
</a>
</div>