JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<h2> We're gonna roll a dice! <br><small>And you have to guess which number the dice will roll.</small></h2>
<div id="test-container">
    <p>Select your guess: </p>
    <select class="form-control" id="select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
</div>

<button id="submit" type="button" class="btn btn-primary">Roll!</button>

CSS

#test-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
#test-container p {
    margin-bottom: 0;
    margin-right: 15px;
}
#test-container select {
    width: auto;
}