JQuery DatePicker misalignment issue

Question

I've used JQuery Datepicker many times before without issue, but now I'm getting a misalignment issue that's got me stumped. The days are floating left, and the dates are floating right.

What am I doing wrong?

HTML:

<div class="w100h005">
<input id="expdate" class="datepicker" placeholder="Expiry Date"></input>
</div>

CSS:

div.w100h005{display:block;width:100%;height:5vh;float:left;margin:1% 0 0 0;}

LINKS:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>

JQuery initialisation:

$(function(){$('.datepicker').datepicker({dateFormat: 'dd/mm/yy'});});
$('.datepicker').attr('autocomplete', 'off');

Answer 1

i checked your code and it has no problem:

$(function(){$('.datepicker').datepicker({dateFormat: 'dd/mm/yy'});});
$('.datepicker').attr('autocomplete', 'off');

div.w100h005{
  display:block;
  width:100%;
  height:5vh;
  float:left;
  margin:1% 0 0 0;
  }

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<div class="w100h005">
<input id="expdate" class="datepicker" placeholder="Expiry Date">
</div>

BTW there is two way you can choose:
1- find the css that cause this issue: inspect it and see what is overwritten
2- write some extra css and overwrite to fix the problem