css adds extra line between two divs

Question

I used this approach for creating this figure since I want my text to be responsive, I could use clip-polygon for the whole element but then once I decrease the window width the text will go left over the slanted area and it looks bad.

I want to make a skewed background. I have a parent div and two divs. I use react + tailwindcss

 <div className={"w-1/2 h-full float-right"}>
        <div className={"h-full w-full bg-red-300 flex"}>
          <div
            className={
              "w-[200px] h-full clip bg-night-drive relative left-0"
            }
          />
          <div className={"bg-night-drive h-full w-full"}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
            atque dignissimos eos optio possimus quae quidem ratione.
            Aliquam beatae culpa cum delectus eos iste, magnam molestiae
            neque nesciunt nihil odio odit, quaerat rem sed sit, vel
            voluptatem. Assumenda delectus dolore ea, eius, enim et eveniet
            ex nesciunt, nihil omnis perferendis quam qui quidem repudiandae
            tempore temporibus voluptatibus. Ab adipisci aliquid amet at
            dolor expedita fugit illum itaque iusto, nobis numquam placeat
            quae qui quod ratione repellendus saepe, soluta suscipit.
            Excepturi illum inventore magnam perspiciatis quae quasi
            repellat rerum totam. Eius fugiat fugit illo, inventore labore
            laudantium natus obcaecati optio totam?
          </div>
        </div>
      </div>

my css for creating a triangle

   .clip {
     clip-path: polygon(100% 0, 0 0, 100% 100%);
   }

I want to remove this line between two divs, it shows on certain screen width and height, sometimes I don't see it but anyway I want to know what it is and how to remove it.