JSFiddle - React, Tailwind, and code Playground

by interlife

HTML

<div id="wrap">
  <div class="inner">
    <p>
    width: calc(innerの中で収めたい横幅 + ((100% - innerの大きさ)/2));
    </p>
    <p>ここにテキストが入ります。</p>
    <p>
    私は一番たといこうした戦争ごとについてのの時にしませます。<br>
    よく事実の誘惑打はどうもこのお話しますだろほどが得と始めなをは脱却行きたべからて、全くとはあるたましょませな。
    </p>
    <p>
    西洋を解せたのはまず前をしばしばたたたい。<br>
    もし嘉納さんから誤解金力少々内談があるた窮屈そのフォリオそれか通知をについてご留学たませですですば、どんな次第は私か道事にしば、
    大森君の事を機械の私で単にご手続きとなりので私時代がお発展をたべようにけっしておお話しがしますでて、
    もっとしきりに経験に見つかりたからいらっしゃるな事に云っありん。
    </p>
  </div>
</div>

CSS

#wrap{
 padding: 20px 0; 
 position: relative;
  &:before {
		content: "";
		height: 100%;
		width: calc(100px + ((100% - 400px)/2));
		position: absolute;
		left: 0;
		top: 0;
		background: #efeeee;
		z-index: -1;
	}
}

.inner{
  margin: 0 auto;
  padding: 20px;
  width: 400px;
  border: 1px solid;
}