JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="row topicrow-header stick" >
  <div class="topic-title">Here is some topic title</div>
  <div class="ld-topic-info">
    <i class="topic-mark-complete far fa-check-circle ld-topic-complete" ></i>
    <i class="topic-mark-favorite far fa-heart fav" ></i>
    <i class="topic-mark-watched far fa-eye watch" ></i>
   <div class="ldnt-content-notes">
      <a class="nt-note-tab  shortcode" href="#" >
        <i class="fas fa-edit" ></i>
      </a>
   </div>
 </div>
</div>

CSS

.topicrow-header .ld-topic-info {
    margin-left: 10px;
}

.ld-topic-info .fas, .ld-topic-info .far {
    padding-left: 10px;
    padding-right: 10px;
}

.topicrow-header.stick {
    position: sticky;
    position: -webkit-sticky;
    top: 110px;
    font-size: 26px;
    background-color: #ff9535;
    color: white;
    font-weight: 300;
}
.topicrow-header {
    z-index: 50;
    background-color: #d3d3d380;
    margin-top: 6px;
    padding: 5px;
    margin-left: 0;
    font-size: 20px;
    color: #007bff;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.ldnt-content-notes {
    text-align: center;
    display:inline;
}

.ldnt-content-notes .nt-note-tab {
    margin: 0;
    display: inline;
    color: #fff;
}

.nt-note-tab {
    display: inline;
    text-align: center;
    font-weight: bold;
    bottom: 0;
    text-decoration: none;
    border-bottom: 0 !important;
    font-size: 26px;
    box-shadow: none !important;
    transition: all ease-in-out 250ms;
    background: rgba(0,0,0,0.95);
    z-index: 9000;
}