JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <ul>
    <li>
      <label>Value:</label>
      <input v-model="value" >
    </li>
    <li>
      <label>Pad to length:</label>
      <input v-model="padLength" type="number" >
    </li>
    <li>
      <label>Pad character:</label>
      <input v-model="padChar" >
    </li>
  </ul>

  <input v-model="output" readonly>
</div>

CSS

ul {
  display: table;
  padding: 0;
}
li {
  display: table-row;
}
li>* {
  display: table-cell;
}
li input {
  margin-left: .5em;
  width: 5em;
}

JavaScript

/*
	String padding:
  http://stackoverflow.com/a/36247412/1869660
*/
var leftPad = (s,c,n) => (s.length<n) ? c.repeat(n-s.length)+s : s;


/*
	App code. Only needed for UI.
*/
new Vue({
  el: '#app',
  data: {
    value: 123,
    padLength: 5,
    padChar: '*',
  },
  computed: {
    output: function () {
      return leftPad(this.value.toString(), this.padChar.toString()[0], this.padLength);
    }
  }
});