Relative and Absolute Positioning In CSS to create specific design-CodePudding

I am new to CSS and I am trying to create a design. The design is to have "title" on the left side of the box. I tried relative and absolute positioning however I couldn't put "title" on the left side without the paragraph overwriting it(I tried offsetting "title" relative to its original place however it goes beyond the box when the screen size changes). Could you please help me with this?

<style>

/********** Base styles **********/
* {
  box-sizing: border-box;
}
h1 {
  margin-bottom: 15px;
}

p {
  border: 1px solid black;
  background-color: gray;
  width: 90%;
  margin: 40px;
  margin-right: auto;
  margin-left: auto;
  font-family: Helvetica;
  color: black;
  position: relative;
}

/* Simple Responsive Framework. */
.row {
  /*text-align: justify;
  margin-left: auto;
  margin-right: auto;*/
  
  width: 100%;
}

span{
  width: 100px;
  height: 25px;
  border: 2px solid black;
  background-color: red;
  position: relative;
  left: 0px;
  display: block;
  clear: left;

}

/********** Large devices only **********/
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    
    
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    
    
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {

    width: 100%;
  }
}

</style>

<h1>Responsive Layout</h1>

<div >
  <section >
        <p > 
          <span>title</span>
          Chicken meal is rendered chicken meat that has been dried and ground up, and includes clean flesh, skin, and/or accompanying bone. But if you see a bag of dog food that proudly states it's made with “Real Chicken,” it's referring to a clean combination of chicken flesh and skin. 
    </p>
  </section>
  <section >
   <p p > head 2 Item 2</p>
  </section>
  <section >
   <p > head 3 Item 3</p>
  </section>
   
</div>

CodePudding user response：

The title must be inside in the div with class "row"

CodePudding user response：

.container{
  display:flex;
}
.title{
background-color:red;

  margin-right:1rem;
}
.row{
   background-color:blue;enter code here
}

.one{
background-color:grey;
}`enter code here`

<div >
  <div >
    TİTLE
  </div>
  <div >
    <p >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium rerum impedit quos optio saepe dolor, eaque magnam fuga odio placeat?
    </p>
        <p >
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro, mollitia!
    </p>
  </div>