<div class="lines"></div>
<div class="sections">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

.lines{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lines line{
  height: 4px;
}

.sections{
  width: 80%;
  margin: auto;
}

.sections .section:nth-of-type(1){
  height: 200px;
  background: pink;
}

.sections .section:nth-of-type(2){
  height: 450px;
  background: red;
}

.sections .section:nth-of-type(3){
  height: 120px;
  background: green;
}

.sections .section:nth-of-type(4){
  height: 300px;
  background:blue;
}

.sections .section:nth-of-type(5){
  height: 700px;
  background: yellow;
}

.sections .section{
  margin-top: 10px;
}

const styleEl = document.createElement("style");
document.head.appendChild(styleEl);

const section = document.querySelectorAll(".sections .section");
const lines = document.querySelector(".lines");

section.forEach((el, index) => {
  const gcsH = window.getComputedStyle(el).getPropertyValue("height");
  const gcsB = window.getComputedStyle(el).getPropertyValue("background-color");

  const className = `line-${index}`;
  const ruleText = `.${className} {
    height: ${gcsH};
    background-color: ${gcsB};
  }`;

  styleEl.sheet.insertRule(ruleText);

  const div = document.createElement("div");
  div.classList.add(className);
  div.textContent = `copy: .${className}`;
  lines.append(div);
});