Is it possible to add an element to a div that is aligned to the right but still sits on top of the other element within the div? Here are some images to illustrate the issue:
https://i.sstatic.net/dW7ev.png
The problem arises when you try to center the "Actions" text but the presence of the icon prevents it from taking up the full width of the div. Although I am currently using Bootstrap columns, they are not providing the desired solution.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066469697275727467762b6f6569687546372837362833">[email protected]</a>/font/bootstrap-icons.css">
<style>
.section-header {
border-bottom: 1px solid var(--menu-dark);
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
background-color: var(--menu-light);
font-weight: bold;
}
.section-header .header-text {
display: flex;
justify-content: center;
}
</style>
<div class="row section-header border border-dark">
<div class="col header-text">Actions</div>
<span class="col-auto"><a href="#" class="btn-edit"><span class="bi bi-pencil"></span></a>
</span>
</div>
<div class="row border border-dark d-flex justify-content-center">
Test
</div>