Rotated resize button working weirdly in firefox

So I have this code and What I want is to put the resize button on the top right of the div, so i rotated the outer box than and then rotated back the inner box to preserve the content, It seems to work fine in chrome but in Mozilla it is using the original directions and it acts weird,

Not Working On Firefox(working on chrome)

(It is working but not as Accepted)

this is the simplified code

.chatbox-flipped{

  /*important */
    overflow: hidden;
    resize: both;
  transform: rotate(180deg);
    width: 30%;
    height: 400px;
    position: fixed;
    bottom: 0;
    right: 0;
  background: black;
}
.chatbox{
  /*important */
  transform: rotate(180deg);
  
  
    color: white;
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
  background: blue;
 }
.chatbox > .chats-container{
  background: red;
}
    

<div class="chatbox-flipped">
    <div class="chatbox">
        <div class="chats-container">
            <p class='received'>
                hey bob
            </p>
        </div>
    </div>
</div>

I have simplified the code You can View the full code over here

Complete Code(On JsFiddle)

I also went the js route but the mouse events are consuming almost 100% of one thread of my computer( I am running a i5 9300H on PopOS ), That's why I am skeptical about using the JS ROUTE, I also tried to update the thing around 30 times a second but it comes out there is no way to get the position of mouse without mouse event. And also personally I like to use only CSS