JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-right">
  <div id="palette-menu">
    <h3 class="menu-element-header">Color Palette</h3>
    <div id="palette-menu-item-0" class="menu-element no-select">
      <span class="palette-color"></span>
      <span class="palette-name">Background</span>
      <a class="edit-button">[EDIT]</a>
    </div>
    <div id="palette-menu-item-1" class="menu-element no-select">
      <span class="palette-color"></span>
      <span class="palette-name">GB Color #1</span>
      <a class="edit-button">[EDIT]</a>
    </div>
    <div id="palette-menu-item-2" class="menu-element no-select">
      <span class="palette-color"></span>
      <span class="palette-name">GameBoy Color number two Color number two </span>
      <a class="edit-button">[EDIT]</a>
    </div>
    <div id="palette-menu-item-3" class="menu-element no-select">
      <span class="palette-color"></span>
      <span class="palette-name">GB Color #3</span>
      <a class="edit-button">[EDIT]</a>
    </div>
    <div id="palette-menu-item-4" class="menu-element no-select">
      <span class="palette-color"></span>
      <span class="palette-name">GB Color #4</span>
      <a class="edit-button">[EDIT]</a>
    </div>
  </div>
</div>

CSS

#menu-left, #menu-right {
	z-index: 10;
	position: fixed;
	background-color: #DDDDDD;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	width: 240px;
	margin: 20px;
}

#menu-left { left: 0; }
#menu-right { right: 0; }

/* #menu-left { float: left; }
#menu-right { float: right; } */

.menu-element-header {
	background-color: #333333;
	color: #DDDDDD;
	margin: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	width: 100%;
	text-align: center
}

.menu-element {
	background-color: #DDDDDD;
	width: 100%;
	cursor: pointer;
}
.menu-element:hover {
	background-color: #BBBBBB;
}

.menu-element .edit-button {
	color: #555555;
	font-size: x-small;
	text-align: right;
	vertical-align: middle;
}
.menu-element       .edit-button { display: none; }
.menu-element:hover .edit-button { display: inline-block; }

#palette-menu .menu-element {
	margin: 0px;
	height: 40px;
}

#palette-menu .palette-color {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	width: 40px;
	height: 100%;
}

#palette-menu .palette-name {
   height: 100%;
    vertical-align: middle;
line-height:40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   display: inline-block;
    max-width: 62%;

}

/* PALETTE MENU */

#palette-menu-item-0 .palette-color { background-color: #C4CFA1; }
#palette-menu-item-1 .palette-color { background-color: #C4CFA1; }
#palette-menu-item-2 .palette-color { background-color: #8B956D; }
#palette-menu-item-3 .palette-color { background-color: #4D533C; }
#palette-menu-item-4 .palette-color { background-color: #1F1F1F; }

.menu-element .palette-name {
	height: 100%;
	vertical-align: middle;
}

.no-select {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}