为什么我的JSX元素尺寸没有减小？

Question

我有两个JSX元素：一个是图像，另一个是表单。我将它们放在一个跨度中是因为我希望它们彼此相邻，但是由于某种原因，具有表单的div容器会填满窗口的整个宽度并在图像下方进行渲染。当我使用内联样式时，它会减小表单的大小，但是整个容器仍然太大。这就是我所拥有的：

<span>
 <Logo />
 <SearchComponent
  style={{ width: "500px" }}
 />
</span>

该组件中表单的代码为：

<form onSubmit={this.handleSubmit}>
 {this.getForm()}
 <input
  type="submit"
  value={this.getValue()}
 />
</form>

这是我的输出的样子（为清楚起见，突出显示了容器）：