As you might guess from the HTML code below, Boostrap grid system is used. I have included CSS, version 4, but example contains also some custom styling.
Check CSS tab in the JSFiddle:
How Will Example Work?
This name is completely up to you, it can be also a class, but keep it mind, to not use it on multiple elements.
Progress bars have set width with inline CSS. This is important, while I want to change width dynamically, so this is the way, how I can bind styles.
I will also change background color of progress bar, depending on the width, but this is controlled with help of predefined Bootstrap classes.
There is a little shaking animation of random number box. This is done via keyframes defined in custom CSS part.
Below the input is a validation message, which I forced to be displayed by inline styles. By default it is hidden, it will be shown only if your bet would be illegal.
This is everything you need to know before writing first lines of Vue code.