Как сделать так, чтобы div был рядом с другим div?

Question

[Кирилл Жиляев]

<style>
    .error {
        background-color: #ffefe9;
        border: 1px solid #ffaaaa;

    }

    .value_info {
        border-radius: 10px;
        border: 2px solid #26a69a;
        color: #26a69a;
    }

    .value_block {
        width: 40%;
    }
</style>

    <div class="value_block">
        Простая переменная:<br>
        <div class="value_info">Простое значение</div>
    </div>

    <div class="value_block">
        Простая переменная:<br>
        <div class="value_info">Простое значение</div>
    </div>

По логике второй div должен влезть правее первого, но он перенесся на новую строку. Как уместить его вправо?

Answer 1

[twobomb]

.value_block {
        width: 40%;
        display:inline-block;
    }

Answer 2

[Андрей Федоров]

Ну а где display: inline-block для .value_block?

Answer 3

[Александр Талалаев]

Для работы блоков в таком плане есть несколько подходов, устаревающий сегодня через добавление свойства float: left, соответственно нужно делать контейнер для них, с обнулением float, чтобы не задевала общую модель элементов.
Либо использовать Flex. Тут тоже нужен контейнер, но все логика работы куда приятнее и меньше влияет на окружение.

<div class='container'>
<div class="value_block">
        Простая переменная:<br>
        <div class="value_info">Простое значение</div>
    </div>

    <div class="value_block">
        Простая переменная:<br>
        <div class="value_info">Простое значение</div>
    </div>
</div>

.error {
        background-color: #ffefe9;
        border: 1px solid #ffaaaa;

    }

    .value_info {
        border-radius: 10px;
        border: 2px solid #26a69a;
        color: #26a69a;
    }

    .value_block {
        width: 40%;
        margin: auto;
    }

.container {
  display: flex;
}

Советую изучить и почитать про Flex, который уже сегодня можно активно использовать во всех проектах, основные браузеры поддерживают.