JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="lvl1">
  <div class="obertka">
    <div class="opening">
      <p>отделов:</p>
    </div>
  </div>
  <div class="lvl2">
    <div class="obertka">111</div>
    <div class="obertka">222</div>
    <div class="obertka">333</div>
  </div>
</div>
<div class="lvl1">
  <div class="obertka">
    <div class="opening">
      <p>отделов:</p>
    </div>
  </div>
  <div class="lvl2">
    <div class="obertka">444</div>
    <div class="obertka">555</div>
  </div>
</div>
<div class="lvl1">
  <div class="obertka">
    <div class="opening">
      <p>отделов:</p>
    </div>
  </div>
  <div class="lvl2">
    <div class="obertka">666</div>
  </div>
</div>

CSS

.lvl1 {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  background: #999;
}
.obertka {
  float: left;
  width: 100%;
}
.opening {}
.opening p {}
.lvl2 {
  float: left;
  width: 100%;
  background: green;
}

JavaScript

$('.lvl1').each(function() {
	 	var lvl1lenght = $('.lvl1 .lvl2 .obertka').size();
		$('.opening p').append("<span class=\"lvl1child\">" + lvl1lenght + "</span>");
	});