Align division bottom left-CodePudding

image reference below link

html

<div >
      <div >1:00 AM Tuesday 13 April 2022</div>
      <div >Toronto</div>
      <div >Cloudy</div>
      <div >8 Degree C</div>
</div>

but unable to align them according to the image

css

.basicinfo {
  position: relative;
}

.dandt {
  position: absolute;
  bottom: 0%;
  color: white;
}

.location {
  position: absolute;
  bottom: 0%;
  color: white;
}

Learning HTML CSS pardon my mistakes Thanks in Advance

CodePudding user response：

It is hard to debug without the reproducible code but if I understood it correctly you want to position that at the bottom left. You can create a div that is absolute with everything inside of it.

Assuming container is your parent div (the card)

.container {
  background-color: black;
  height: 200px;
  width: 400px;
  position: relative;
  color: white;
}

.basicinfo {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.weather-display {
  display: flex;
}

<div >
  <div >
    <div >1:00 AM Tuesday 13 April 2022</div>
    <div >Toronto</div>
    <div >
      <div>☁️</div>
      <div>
        <div >Cloudy</div>
        <div >8 Degree C</div>
      </div>
    </div>
  </div>
</div>