Отображение блока при наведении CSS?

Question

[stepaniwe]

При наведении на элемент появляется контент. Как сделать так чтобы данные элементы оставались в одну линию по горизонтали, а контент просто появлялся снизу? (как на картинке). Без использования flexbox

https://codepen.io/st-iv/pen/mxZmeV?editors=1100

Answer 1

[suberg]

vertical-align: top для .content
Для инлайн-блоков всегда нужно указывать vertical-align

Comments

[stepaniwe]

так просто оказывается, спасибо.
совсем забыл об этом свойстве

Answer 2

[frees2]

<button type="button" onmouseover="loadDoc2(); this.style.display='none';return false">открыть список каналов</button>
<ul> </ul>
<script> function loadDoc2(){var myList = document.querySelector('ul');fetch('products.json').then(function(response) { return response.json(); })
.then(function(json) { for(var i = 0; i < json.products.length; i++){var listItem = document.createElement('li');
listItem.innerHTML = '<strong>' + json.products[i].Name + '</strong>';
listItem.innerHTML +=' can be found in ' + json.products[i].Location + '.';
listItem.innerHTML +=' Cost: <strong>?' + json.products[i].Price + '</strong>';
myList.appendChild(listItem); 
 } })};
  </script>