<div>
      <input type="submit" />
      <input type="text" />
</div>

<style>

div {
  display: flex;
}

input[type='submit'] {
  width: 25%;
}

input[type='text'] {
  width: 75%;
}

</style>

我创建了一个提交按钮和一个文本输入字段，并将其 Package 在一个div中。
我给div一个flex的显示，它将按钮和输入字段彼此对齐。
然后我给按钮的宽度为25%或div长度的1/4，并给输入字段的宽度为75%或div长度的3/4。
如果你想给div给予一个特定的宽度，你可以使用div的width属性。

要创建一个左对齐的按钮不在输入框内的输入框，您可以使用HTML和CSS代码。下面是一个示例：
HTML

<div class="container">
  <input type="text" placeholder="Enter text here">
  <button type="button">Button</button>
</div>

CSS：

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

input[type="text"] {
  width: 75%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

button {
  width: 23%;
  height: 40px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

在这个例子中，我们使用了一个显示属性为flex的容器div，它允许我们将输入框和按钮元素并排对齐，并在它们之间留出空间。输入框的宽度为75%，按钮的宽度为23%。我们还将输入框和按钮的样式设置为具有一致的高度，边框半径和填充。