There are a pair of containers. The main container functions as the parent, while the child container acts as a tag to categorize the content. The objective is to position the tag container at the top right corner of the main content container, slightly offset from the right side so that the top border of the main container divides the tag container in half. I have managed to get close to achieving this, but my concern is how to perfectly align the top border of the main container with the center of the tag container?
I am providing a link to the codesandbox for easy reference.
<div className="main">
<div className="tag">TAG</div>
<p>MAIN CONTENT</p>
</div>
.main {
height: 150px;
width: 350px;
border: 1px solid black;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tag {
height: 20px;
width: 100px;
border: 1px solid green;
border-radius: 8px;
position: absolute;
top: -12px;
right: 24px;
z-index: 999;
background-color: green;
}