Как я могу предотвратить уменьшение до размера его содержимого?

У меня есть два элемента в контейнере:

    This is a div
    This is a button

В стиле:

span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    margin: 5px;
    background: #c0c0c0;
    font: inherit;
}

.container {
    border: 1px solid black;
}

Вы можете увидеть живую демонстрацию здесь .

Почему ширина кнопки не соответствует ширине диапазона? Как заставить кнопку вести себя как стандартный элемент уровня блока?

Мне нужно использовать здесь , потому что его цель - отправить форму.