JSFiddle - React, Tailwind, and code Playground

by CyberAP

HTML

<div class="wrapper">
  <button class="btn delete">
    Delete
  </button>
  <button class="btn edit">
    Edit
  </button>
</div>

CSS

.wrapper {
  border: 1px solid black;
  padding: 40px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.btn {
  -webkit-appearance: none;
  border: 1px solid black;
  margin: 10px;
  outline: none;
  padding: 5px 10px;
  font-size: 18px;
  background-color: #ddd;
}

.wrapper:hover .edit {
  background: green;
  color: white
}

.wrapper .delete:hover {
  background: red;
  color: white
}

.wrapper .delete:hover + .edit {
  background-color: #ddd;
  color: #000;
}