JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <textarea>This is a sample text</textarea>
    <div class="full-screen-button">x</div>
</div>

CSS

.wrapper {
	/* wrapper is needed to trace textarea's size, to position the button */
    display: inline-block;
    position: relative;
}

.wrapper > textarea {
    font-size: 1em;
    /* purposefully ugly animation to make a point */
    transition: font-size 1s linear;
}

.wrapper > .full-screen-button {
    position: absolute;
    bottom: 2px;
    left: 2px;
    cursor: pointer;
}

.wrapper.full-screen,
.wrapper.full-screen > textarea {
    position: fixed!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    border: 0!important;
    resize: none!important;
    outline: none!important;
    font-size: 3em;
}

JavaScript

$("textarea").on("dblclick", function() {
    $(this.parentNode).toggleClass("full-screen");
});

$(".full-screen-button").on("click", function() {
    $(this.parentNode).toggleClass("full-screen");
});