JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
<button class="click">クリック</button>

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  overflow-x: hidden; /* 追加 */
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.box {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 50%;
  height: 100vh;
  background-color: red;
  position: absolute;
  left: 0;
  /* transition: all 2s ease; */
}

/* .left.action{
    width: 0;
    transition: all 2s ease;
} */
.right {
  width: 50%;
  height: 100vh;
  background-color: black;
  position: absolute;
  right: 0;
  /* transition: all 2s ease; */
}

/* .right.action{
    width: 0;
    transition: all 2s ease;
} */
.click {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

JavaScript

$('.click').on('click', function() { // ドットつける
  $('.left').animate({ // html的にシャープじゃなくてドットでは？
    left: -1 * $('.left').width(), // left要素の横幅分マイナスpx
  }, 500);
  $('.right').animate({ // html的にシャープじゃなくてドットでは？
    right: -1 * $('.right').width(), // right要素の横幅分マイナスpx
  }, 500);
});