Как border прислонить к другому border'у?

Question

[IDOL772]

Подскажите, пожалуйста, какие свойства css нужно задать, чтобы получить результат, как на второй картинке?
Первая картинка - текущий результат.
Стили заданы следующие:

.product_info - внешний блок
.product_specifications - внутренний блок

.product_info {
	border: 1px solid black;
	border-radius: 5px;
	height: 100px;
	margin-top: 10px;
	padding: 0;
	text-align: left;
}

.product_specifications{
	text-align: center;
	border: 1px solid black;
	border-radius: 5px;
	font: bold calc(100vw/70) 'Roboto Condensed', sans-serif;
	padding-left: 3px;
	padding-right: 3px;
	position: relative;
	top: 0;
}

C position вроде как получилось, но если уменьшать разрешение, то внутренний блок .product_specifications улетает вниз

Answer 1

[TheSnegok]

Через position: absolute если ты ещё хочешь чтобы и при уменьшении оно не улетало вниз:
тык

Comments

[IDOL772]

Через position: absolute блок "Характеристики" уходит в левый верхний угол

[TheSnegok]

IDOL772, Зайдите в пример и скопируйте оттуда код и вставте, там всё правильно, возможно вы забыли product_info добавить свойство relative)

[IDOL772]

TheSnegok, Точно, спасибо огромное! Все работает)

Answer 2

[andand44]

transform: translate(-1px, -1px); Сдвинет .product_specifications влево и вверх на ширину border

.product_specifications{
  text-align: center;
  border: 1px solid black;
  border-radius: 5px;
  font: bold calc(100vw/70) 'Roboto Condensed', sans-serif;
  padding-left: 3px;
  padding-right: 3px;
  position: relative;
  top: 0;
  transform: translate(-1px, -1px);
}

Comments

[IDOL772]

При большом разрешении работает, при маленьком - уходит вниз

[IDOL772]

Это при разрешении 630px со свойством transform: translate(-1px, -1px);

[andand44]

Значит есть какие-то стили или скрытые div, которые не указаны в вопросе
Работает при любых разрешениях https://codepen.io/andand44/pen/bGWzWyx

Answer 3

[kryamk]

outline вместо border можно использовать