Move text outside of the container vertically

I have DIV with some CSS styling and TEXT inside DIV. How to move TEXT outside of DIV and apply some styling using either CSS or JavaScript?

HTML

<div class="divstyle">TEXT</div>

CSS

.divstyle {
    width: 200px;
    height: 50px;
    background-color: grey;
}

I create complete DIV over javascript:

var inputfield = document.createElement("div");
inputfield.textContent = inputfieldData['TEXT'];
inputfield.classList.add("divstyle");
inputfieldsContainer.appendChild(inputfield);

When it renders in browser it looks like this:

+-----------------+
| TEXT            |
+-----------------+

I wish to be like this:

TEXT
+-----------------+
|                 |
+-----------------+

What I tried:

.divstyle::before {
    top: -50px;
    left: -20px;
}

Is there a way to add DIV inside DIV using only CSS?
Maybe the solution could be to wrap the TEXT in some tag and apply CSS to it, but if it's possible to do it over CSS?

It is not entirely clear what you want, maybe something like this will suit you:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
  display: inline-grid;
  grid-auto-rows: 1fr;
}

div:after {
  content: '';
  border: dashed 1px;
}

<!-- language: lang-html -->

<div>TEXT</div>

<!-- end snippet -->

Although I don't understand why you want this, here is two ways to achieve it :

1. First way :

HTML

<div class="divstyle">
  <span class="out">TEXT</span>
</div>

CSS

.divstyle {
  position: relative;
  background-color: grey;
}
.out {
  position: relative;
  top: -1em;
}

2/ Second way (after reading your first comment) :

HTML

<div class="divstyle" content="TEXT"> </div>

CSS

.divstyle {
  background-color: grey;
}
.divstyle:before {
  content: attr(content);
  position: absolute;
  top: -1em;
}

You could add a span using another styling (here: textstyle)

<div class="divstyle">
    <span class="textstyle">
        TEXT
    </span>
</div>

which could look like that

    .textstyle {
        position: absolute;
        top: -20px;
        font-size: 24px;
    }

The important part to notice here is that position is set to absolute, so you can position it relative to its first positioned ancestor element.

Instead of setting the text inside div, you can set the content of the pseudo-element as 'TEXT' and do the following.

<div class="divstyle"></div>
.divstyle {
    width: 200px;
    height: 50px;
    background-color: grey;
    position: relative;
    margin-top: 50px;
}

.divstyle::before{
    content: 'TEXT';
    position: absolute;
    top: -50%;
}

https://codepen.io/caglar62/pen/LYgaPPW