learningmode learningmode - 10 months ago 88
CSS Question

Align text within div tags

I've this below html

str+="<div class='label' date1='"+a+"' date2='"+a1+"' id='mydiv'> Start Date "+a;
str+="End Date "+a1;


Now I want date1 should be aligned left to the page and date2 should be aligned right to the page.

How to do this?

Regards

Answer Source

Make it simple with flexbox and pseudo elements.

#mydiv {
  display: flex;
  justify-content: space-between;
}
#mydiv::before {
  content: "Start Date: " attr(date1);
}
#mydiv::after {
  content: "End Date: " attr(date2);
}
<div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv"></div>

So, your code will be like this:

str+="<div class='label' date1='"+a+"' date2='"+a1+"' id='mydiv'></div>";