How to fix the date to be in the bottom and in the line of the text dependant of the text?

user_13658446 0
Viewed 173

I designed a message to have the date in the bottom.

Here is the JSfiddle

I don't know how to make the date to be in the bottom (For example the second box). And I don't know how to fix the date to be in the line of the text, if the text is not too long. (For example the first box)

.parent {
  overflow: hidden;
  background: pink;
  width: 70%;
  text-align: right;
}

.child {
  display: inline-block;
  float: left;
  text-align: left;
}
<div class="parent">
  <div class="child">
    txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt 
  </div>
  HH:MM
</div>
<br/>
<div class="parent">
  <div class="child">
    txt txt txt txt txt txt <br>
    txt txt txt txt txt txt
  </div>
  HH:MM
</div>

I appreciate every help :)

css html
2 Answers

I made some changes to youe code. In this way you can show the date right bottom.

.parent {
  overflow: hidden;
  background: pink;
  width: 70%;
}

.child {
  text-align: left;
}

.right{
  display: inline-block;
  float: right;
}
<div class="parent">
  <div class="child">
  <span>
    txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt
    </span>
    <span class="right"> HH:MM</span>
  </div>
 
</div>
<br/>
<div class="parent">
  <div class="child">
  <span>
    txt txt txt txt txt txttxt <br /> txt txt txt txt txt
    </span>
    <span class="right">HH:MM</span>
  </div>
  
</div>

user_69448810

You can set a class name for the date like this :

<span class="className"> HH:MM </span>

Then you can adjust it's position by setting margin or padding to the class name like this :

.className {
   // Setting margin 
   margin-top : 10px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   // Or padding
   padding-top : 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
}
user_136281010
Related