I'm trying to do a simple page with two divs inside a large div which I'm using as a container for the whole page. For being able to do this I'm using the `display: inline` for the divs, but when I do this everything just wrecks itself.

```css
div {
    margin: auto;
    border: 2px solid black;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
#container {
    width: 95%;
    min-height: 620px;
}
#options, #forms {
    display: inline;
}
h1 {
    text-align: center;
}
```

```html
<body>
    <div id="container">
        <h1>BANCO DE LA NACION</h1>
        <hr>
        <div id="options">
            <h3>Eliga su operación:</h3>
            <input type="button" name="crear" id="creacion" value="Crear nueva cuenta">
            <input type="button" name="mostrar" id="mostrador" value="Mostrar datos">
        </div>
        <div id="forms">
        </div>
    </div>
</body>
```

I'm wondering if there is another way of making divs spawn right to each other (without the usage of bootstrap which for the moment I'm trying to avoid) or in the case the way I'm doing it is the correct one, which is my mistake?