Questions & Answers

I am facing some issues in my (home.component.css ) about alignment .

• Instead of origins I but descriptions of food .

• And I want the title of food take specific spaces .

• And stars and clock be in the same line .

• And price be in the same position(line) for all products , to be nice for users .

Screenshoot for the output result

ul{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

ul li a{
  height: 26.5rem;
  width: 20rem;
  border: 1px solid whitesmoke;
  border-radius: 1rem;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e72929;
}
li a:hover{
  opacity: 0.9;
  cursor: pointer;
}

.content{
  padding: .5rem 1rem;
  position: relative;
}

.favorite{
  position: absolute;
  top: .5rem;
  right: .7rem;
  font-size: 1.2rem;
}

.favorite.not{
  color: grey;
}

.stars{
  margin-bottom: .5rem;
}

.product-item-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.origins{
  flex: 9;
}

.origins span{
  border-radius: none;
  background-color: none;
  display: inline-block;
  font-size: .9rem;
  color: grey;
  margin-right: .7rem;
  margin-top: .2rem;
}

.cook-time{
  font-size: .8rem;
  flex: 3;
  text-align: right;
}

.price{
  color:#414141;
  margin-top: .7rem;
}