I dont know how to make this 3 column layout-CodePudding

i have problem with this 3 column layout. I have tried something but it went wrong. Can you help me please with this. I dont know what to do anymore. I will be so happy if you can help.There is so big gaps between adress and opening time also i dont know how to move more days and opening time to the right. Now its not clear and its messy. Example: https://i.stack.imgur.com/MSvH7.png

my code:

  <div >
    <div >
    <p> 
      Ruckholt Road 28</br>
      Leyton London</br>
      United Kingdom</br>
    </p>
    </div>
    <div >
    <p>     
      Monday</br>
      Tuesday</br>
      Wednesday</br>
      Thursday</br>
      Friday</br>
      Saturday</br>
      Sunday</br>
    </p>
    </div>
    <div >
    <p>
      11:00 - 15:30</br>
        12:00 - 18:00</br>
        Closed</br>
        12:00 - 18:00</br>
        11:00 - 14:30</br>
      Closed</br>
        Closed</br>
    </p>
    </div>
 </div>

  .columnn {
      flex: 33.33%;
      padding: 0px;
      margin: 0px;
    }
    .container {
    font-size: 20px;
    text-align: center;
    margin: 0 30%;
       display: flex;
    }

CodePudding user response：

I didn't fully understand your question but perhaps something like this?
https://codepen.io/i-empty/pen/abEejeQ?editors=1100

   <div >
  <div >
    <p>
      Ruckholt Road 28</br>
      Leyton London</br>
      United Kingdom</br>
    </p>
  </div>
  <div >
    <h3> Opening Hours </h3>
    <p>
      Monday</br>
      Tuesday</br>
      Wednesday</br>
      Thursday</br>
      Friday</br>
      Saturday</br>
      Sunday</br>
    </p>
  </div>
  <div >
    <p>
      11:00 - 15:30</br>
      12:00 - 18:00</br>
      Closed</br>
      12:00 - 18:00</br>
      11:00 - 14:30</br>
      Closed</br>
      Closed</br>
    </p>
  </div>
</div>

    .container {
  border: 1px solid blue;
  font-size: 20px;
  text-align: left;
  margin: 0 30%;
  display: flex;
  align-items: center;
}

.columnn {
  flex: 33.33%;
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  &:last-child {
    margin: 9% 0 0 0;
    text-align: right;
  }
}

CodePudding user response：

You can try :

.container{
  display: flex;
  justify-content: space-evenly;
}

An example below :

body{
  background: #d54343;
  color: white;
}
.container{
  display: flex;
  justify-content: space-evenly;
}
.column{
  display: flex;
}
.opening{
  position: absolute;
}
.col-2{
  margin-right: 40px;
  font-weight: bold;
}
.col-3{
  margin-top: 45px;
}

<body>
  <div >
    <div >
    <h3>Contact info</h3>
    <p> 
      Ruckholt Road 28</br>
      Leyton London</br>
      United Kingdom</br>
    </p>
    </div>
    <div >
      <div >
        <h3>Opening</h3>
        <p>     
          Monday</br>
          Tuesday</br>
          Wednesday</br>
          Thursday</br>
          Friday</br>
          Saturday</br>
          Sunday</br>
        </p>
      </div>
      <div >
        <p>
          11:00 - 15:30</br>
            12:00 - 18:00</br>
            Closed</br>
            12:00 - 18:00</br>
            11:00 - 14:30</br>
          Closed</br>
            Closed</br>
        </p>
      </div>
    </div>
 </div>
</body>

CodePudding user response：

Maybe something like this?? This is base on your code provided. Let me know

.columnn {
      padding: 0px;
      margin: 0px;
    }



.col-2 {
    display: flex;
    justify-content:space-evenly; 
    grid-gap:20px;
   
    }

.col-1 {
    display: grid;
    }

.container {
    font-size: 20px;
    text-align: left;
    margin: 0 auto;
    display: flex;
    justify-content:space-evenly;
    }

<div >
    <div >
    <h2> Contact Information </h2>
     <div >
      <p> 
      Ruckholt Road 28<br>
      Leyton London<br>
      United Kingdom
      </p>
     </div>
    </div>
    

         
    <div>
    <h2> Hours Open </h2>
      <div >
      <p>     
      Monday<br>
      Tuesday<br>
      Wednesday<br>
      Thursday<br>
      Friday<br>
      Saturday<br>
      Sunday
      </p>

      <p>
      11:00 - 15:30<br>
      12:00 - 18:00<br>
      Closed<br>
      12:00 - 18:00<br>
      11:00 - 14:30<br>
      Closed<br>
      Closed
      </p>
    </div>
    
 </div>
  </div>