How to put a constant placeholder in the top left corner of the input?

Question

I have an Input component (by antd) that I want to design is such a way that the placeholder text will be always constant, small, and in the top left corner of the component.

I currently have managed to put it the left top corner, but not the constant part:

const MyInput = styled(Input)`
  ::placeholder {
    font-size: 14px;
    width: 200px;
    position: absolute;
    pointer-events: none;
    left: 4px;
    top: 0px;
  }
  height: 50px;
`;

<MyInput style={{ width: "50vw" }} placeholder={"name here"} />

Answer 1

after more search I figured that @Terry was right, and the answer was to use a label tag instead of a placeholder,

so after some digging into stackoverflow I found the post (Floating labels using React and Ant Design)

and played with the code a bit to create this one -

const FloatLabel = ({ children, labelText }) => {
  const labelStyle = {
top: 2,
fontSize: 10,
fontWeight: "normal",
position: "absolute",
pointerEvents: "none",
left: 12,
transition: "0.2s ease all"
};

 return (
<div style={{ position: "relative", marginBottom: 12 }}>
  {children}
  <label style={labelStyle}>{labelText}</label>
</div>

); };