Full width div triggered by onclick

My sandbox on JSFIDDLE

When ‘OPEN’ is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn’t work.

In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.

I’m testing this function before I deploy it on my website.

jQuery –

$(".openit").on("click", function() {
  $(".expandBG").toggleClass("content");
  $(".openit").hide();
  $(".closeit").show();
  $(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
  $(".expandBG").toggleClass("content");
  $(".openit").show();
  $(".closeit").hide();
  $(".text").hide();
});

HTML –

<div class="wrapper">


<div class="back">BG
<div class="expandBG">
  <div class="openit">OPEN</div>
  <div class="flex-col">
    <div class="closeit">CLOSE</div>

    <div class="content text" style="display: none;">
      <div>(CONTENT HERE)</div>
    </div>
  </div>
</div>
</div>


</div>

CSS –

body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}