Astrojs: How can I get a component to appear as inline text in an MDX file?

Question: In the screenshot below, I want the first line to appear exactly as the second line. Is there a way to do this in Astrojs?

Here is my full reproduction on Codesandbox.

Here is what the output looks like (see below). Notice how the period has a space before the word "text" in the first line and the second line does not have a space. The reason this is happening is because there is a line break after the end </div> element in the html in the first example. I need to figure a way to prevent the line break from happening.

Here are the contents of my mdx file:

---

---
import Inline from "./components/Inline.astro";

<div>Here is <Inline text="some text"/>. to inline</div>

<div>Here is <div style="display:inline">some text</div>. to inline</div>

And here are the contents of the Inline.astro component:

---
interface Props {
  text: string;
}

const { text } = Astro.props;
---

<div>{text}</div>

<style>
  div {
    display: inline;
  }
</style>

I have tried using a <span> element instead of a <div>, but this did not change anything. My use case is to create Astro components that appear inline within text blocks.

As a workaround, I created a separate Paragraph component that strips out all line breaks:

The Paragraph.astro file:

---
const html = (await Astro.slots.render("default")).replace(/[\r\n]/gm, "");
---

<div set:html={html} />

The I can just wrap my inline content like so:

<Paragraph>Here is <Inline text="some text"/>. to inline</Paragraph>