如何定位输入组件的y坐标？

Question

这是我想要实现的UI Prototype

以下是我目前所拥有的内容：JSFiddle

和我用于控制输入组件位置的CSS代码

input {
   background-color:red;
  transform: translateY(-200px); 
  padding: 0px;
  transform: translateX(-120px)
 }

输入标记未正确排列。我在这里使用最有意义的是 CSS Transform属性，但translateY和translateX似乎互相撤消。我能够用

排列组件的x位置

      transform: translateX(-120px)

但是我输入translateY的任何价值都没有效果。

有谁知道输入translateX和translateY的参数会达到我想要的效果。我应该使用不同的CSS属性来执行此操作吗？