guess 12/24h

by Felis Catus

HTML

<div class='flx'>
<input type="datetime-local">
<div class='filler'>
</div>
</div>
<button>
clock
</button>

CSS

input::-webkit-datetime-edit-ampm-field {
  background: red;
  min-width: 5000px;
  display: block;
}
.flx {
  display: flex;
  flex-direction: row;
  border: 1px solid blue;
  width: 300px;
}
input {
  flex: 1 1 auto;
  width: auto;
}
.filler {
  flex: 1 1 99%;
}

JavaScript

(function(){
	document.querySelector('input').value='2020-10-02T09:10';
  document.querySelector('button').addEventListener('click', function(){
  	console.log(document.querySelector('input').value);
    document.querySelector('.filler').innerText=(document.querySelector('input').getBoundingClientRect().width)
  })
})()