JSFiddle - React, Tailwind, and code Playground

by denisz

HTML

<html>
  <head>
    <meta name="viewport" content="width=1900">
  </head>
  <body>
    <svg viewBox="0 0 1900 200" xmlns="http://www.w3.org/2000/svg">
      <foreignObject x="0" y="0" width="1900" height="100%">
        <h2>
          <style>
            .inner-rule {
              width: 100%;
              border-bottom: 1px solid red;
              text-align: right;
            }
          </style>
          <div class="inner-rule">inner rule</div>
        </h2>
      </foreignObject>
    </svg>
    <div class="rule">rule</div>
  </body>
</html>

CSS

.rule {
  width: 1900px;
  border-bottom: 1px solid red;
}