@uiw/react-split/dist/dist.css

A piece of content can be divided into areas that can be dragged to adjust the width or height.

.w-split {
  height: 100%;
  display: flex;
  flex-direction: row;
  --w-split-bar-shadow: #d5d5d5;
  --w-split-bar-shadow-disable: #d5d5d5;
}
.w-split-bar {
  z-index: 10;
  position: relative;
  justify-content: center;
  display: flex;
  background: #f8f8f9;
  background: var(--w-split-bar-background, #f8f8f9);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.w-split-bar::before,
.w-split-bar::after {
  content: '';
  display: block;
}
.w-split-bar.disable {
  pointer-events: none;
  cursor: not-allowed !important;
}
.w-split-bar:hover:not(.disable) {
  transition: background-color 0.3s;
  background: #ecf7ff;
  background: var(--w-split-bar-hover-background, #ecf7ff);
}
.w-split.dragging .w-split-pane {
  position: relative;
}
.w-split.dragging .w-split-pane::before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.w-split > .w-split-pane {
  transform: none;
}
.w-split:not(.dragging) > .w-split-pane {
  transition: all 0.3s;
}
.w-split-horizontal > .w-split-bar {
  cursor: col-resize;
  width: 5px;
  flex-direction: column;
  box-shadow: inset 1px 0 0 0 var(--w-split-bar-shadow), 1px 0 0 0 var(--w-split-bar-shadow);
}
.w-split-horizontal > .w-split-bar::before,
.w-split-horizontal > .w-split-bar::after {
  height: 3px;
  width: 100%;
  box-shadow: inset 0 1px 0 0 var(--w-split-bar-shadow), 0 1px 0 0 var(--w-split-bar-shadow);
}
.w-split-horizontal > .w-split-bar::before {
  margin-top: -1px;
}
.w-split-horizontal > .w-split-bar::after {
  margin-top: 3px;
}
.w-split-horizontal > .w-split-bar.disable {
  box-shadow: inset 1px 0 0 0 var(--w-split-bar-shadow-disable), 1px 0 0 0 var(--w-split-bar-shadow-disable) !important;
}
.w-split-vertical {
  flex-direction: column;
}
.w-split-vertical > .w-split-bar {
  cursor: row-resize;
  width: 100%;
  height: 5px;
  align-items: center;
  flex-direction: row;
  box-shadow: inset 0 1px 0 0 var(--w-split-bar-shadow), 0 1px 0 0 var(--w-split-bar-shadow);
}
.w-split-vertical > .w-split-bar.disable {
  box-shadow: inset 0 1px 0 0 var(--w-split-bar-shadow-disable), 0 1px 0 0 var(--w-split-bar-shadow-disable) !important;
}
.w-split-vertical > .w-split-bar::before,
.w-split-vertical > .w-split-bar::after {
  height: 100%;
  width: 3px;
  box-shadow: inset 1px 0 0 0 var(--w-split-bar-shadow), 1px 0 0 0 var(--w-split-bar-shadow);
}
.w-split-vertical > .w-split-bar::before {
  margin-left: -1px;
}
.w-split-vertical > .w-split-bar::after {
  margin-left: 3px;
}
.w-split-large-bar div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.w-split-vertical > .w-split-line-bar:hover::before,
.w-split-horizontal > .w-split-line-bar:hover::before {
  background: #008ef0;
  background: var(--w-split-line-bar-hover-border-color, #008ef0);
}
.w-split-vertical > .w-split-line-bar {
  height: 1px;
}
.w-split-vertical > .w-split-line-bar div {
  cursor: row-resize;
  width: 100%;
  height: 8px;
  margin-top: -2px;
  margin-bottom: -2px;
}
.w-split-vertical > .w-split-line-bar div:hover,
.w-split-vertical > .w-split-line-bar div:active,
.w-split-vertical > .w-split-line-bar div:focus {
  margin-top: -6px;
  margin-bottom: -6px;
  height: 6px;
}
.w-split-vertical > .w-split-line-bar div:hover::after,
.w-split-vertical > .w-split-line-bar div:active::after,
.w-split-vertical > .w-split-line-bar div:focus::after {
  background: #008ef0;
  background: var(--w-split-line-bar-active-background, #008ef0);
}
.w-split-vertical > .w-split-line-bar div::after {
  height: 1px;
  width: 100%;
}
.w-split-horizontal > .w-split-line-bar {
  width: 1px;
}
.w-split-horizontal > .w-split-line-bar div {
  cursor: col-resize;
  height: 100%;
  width: 8px;
  margin-left: -2px;
  margin-right: -2px;
}
.w-split-horizontal > .w-split-line-bar div:hover,
.w-split-horizontal > .w-split-line-bar div:active,
.w-split-horizontal > .w-split-line-bar div:focus {
  margin-left: -6px;
  margin-right: -6px;
  width: 6px;
}
.w-split-horizontal > .w-split-line-bar div:hover::after,
.w-split-horizontal > .w-split-line-bar div:active::after,
.w-split-horizontal > .w-split-line-bar div:focus::after {
  background: #008ef0;
  background: var(--w-split-line-bar-active-background, #008ef0);
}
.w-split-horizontal > .w-split-line-bar div::after {
  width: 1px;
  height: 100%;
}
.w-split-vertical > .w-split-line-bar,
.w-split-horizontal > .w-split-line-bar {
  flex-direction: inherit;
}
.w-split-vertical > .w-split-line-bar::before,
.w-split-horizontal > .w-split-line-bar::before {
  display: none;
}
.w-split-vertical > .w-split-line-bar div,
.w-split-horizontal > .w-split-line-bar div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.w-split-vertical > .w-split-line-bar div::after,
.w-split-horizontal > .w-split-line-bar div::after {
  content: '';
  display: block;
  background-color: #d5d5d5;
  background-color: var(--w-split-line-bar-background, #d5d5d5);
}
.w-split-line-bar {
  box-shadow: inset 0 0 0 0 !important;
  background: transparent;
}
.w-split-line-bar::before {
  box-shadow: inset 0 0 0 0 !important;
}
.w-split-line-bar::after {
  display: none;
}