Адаптивные линии

Question

Как поставить заголовок выше линий? Как сделать линии адаптивными?

#section {
    background: #000;
    padding: 50px 0 55px 0;
}

.title {
    display: flex;
    justify-content: center;
} 

.title h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 2.2em;
    font-weight: 400;
}

.lines {
    display: flex;
}
  
  .hight-line {
      width: 230px;
      height: 1px;
      background: #fff;
      margin-top: 1px;
  }

  .short-line {
      width: 70px;
      height: 3px;
      background: #fff;
  }

<section id="section">
        <div class="container">
            <div class="title">
                <div class="lines">
                    <div class="hight-line"></div>
                    <div class="short-line"></div>
                </div>

                <h2>Product</h2>

                <div class="lines">
                    <div class="short-line"></div>
                    <div class="hight-line"></div>
                </div>
            </div>
        </div>
    </section>

Answer 1

#section {
    background: #000;
    padding: 50px 0 55px 0;
}

.title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.title h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 2.2em;
    font-weight: 400;
}

.lines {
    display: flex;
    width: 100%;
}
  
  .hight-line {
      width: 100%;
      height: 1px;
      background: #fff;
      margin-top: 1px;
  }

  .short-line {
      width: 30%;
      height: 3px;
      background: #fff;
  }

<section id="section">
        <div class="container">
            <div class="title">
                <div class="lines">
                    <div class="hight-line"></div>
                    <div class="short-line"></div>
                </div>

                <h2>Product</h2>

                <div class="lines">
                    <div class="short-line"></div>
                    <div class="hight-line"></div>
                </div>
            </div>
        </div>
    </section>

БЛОГ НА HUSL

Адаптивные линии

Ответы (1 шт):