Размер кнопки над ячейкой таблицы

Как задать кнопке такой же размер как и ячейке таблицы, но так, чтобы она изменяла свой размер при разных разрешениях монитора как и эта самая ячейка. При это находясь ровно над ней (z-index ?). Таблица без отображения кнопки

Отображение кнопки при наведении на правую половину ячейки

Отображение кнопки при наведении на левую половину ячейки

Проблема с растягиванием кнопки на весь размер ячейки

       <td class="p-0 journal-td">
          <div class="journal-grade">3</div>
          <div class="top-layer">
            <form class="form-group journal-form" action="journal-teacher.html" method="get">
              <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group container-fluid p-0" role="group" aria-label="First group">
                  <button type="button" class="btn journal-btn journal-btn-left"></button>
                  <button type="button" class="btn journal-btn journal-btn-right"></button>
                </div>
              </div>
            </form>
          </div>
        </td>

.journal-form {
  margin: 0 0 -25px 0;
}
.journal-btn {
  border-radius: 0;
  padding: 0;
  height: 50px;
  width: 30px;
  opacity: 0.5;
}
.journal-btn-left:hover {
  background-color: #E74C3C;
}
.journal-btn-right:hover {
  background-color: #2ECC71;
}