How to predict the size of components with Layouts?

On school I was asked to make a small app on AWT. I agreed and I made my sketch. But I didn’t know AWT doesn’t have Spinner, I am starting to figure out this was to make us struggle. Anyway. I have the following:

package com.example.manantial;

import java.awt.BorderLayout;
import java.awt.Button;
import java.awt.Panel;
import java.awt.TextField;
import java.awt.event.ActionEvent;
import java.awt.event.TextEvent;
import java.awt.event.TextListener;

public class Spinner extends Panel {
    private NumberField spinnerText;
    
    public Spinner() {
        super(new BorderLayout());
        spinnerText = new NumberField();
        
        
        Button arriba = new Button("^");
        arriba.addActionListener((ActionEvent e)->spinnerText.setValue(getValue()+1));
        Button abajo = new Button("v");
        abajo.addActionListener((ActionEvent e)->spinnerText.setValue(getValue()-1));
        Panel right = new Panel(new BorderLayout());
        right.add(arriba,"North");
        right.add(abajo,"South");
        add(right,"East");
        add(spinnerText);   
    }
    
    int setValue(int value) {
        spinnerText.setValue(value);
        return value;
    }
    int getValue() {
        return spinnerText.getValue();
    }
    private class NumberField extends TextField implements TextListener {
        
        private int intValue = 0;
        
        private NumberField() {
            super.setText("0");
            addTextListener(this);
        }
        int setValue(int i) {
            intValue = i;
            super.setText(Integer.toString(i));
            return i;
        }
        int getValue() {
            if (Utils.isNumber(getText()))
                return Integer.parseInt(getText());
            return setValue(0);
        }
        
        @Override
        public void setText(String t) {
            if (!Utils.isNumber(t))
                t = "0";
            super.setText(t);
                
        }
        @Override
        public void textValueChanged(TextEvent e) {
            if (getText().equals("")) {
                setValue(0);
                return;
            }
            if (getText().length()>3) {
                super.setText(getText().substring(0,2));
                if (Integer.toString(intValue).equals(getText()))
                    return;
            }
            if (Utils.isNumber(getText()))
                intValue = Byte.parseByte(getText());
            else super.setText(Integer.toString(intValue));
            setCaretPosition(getText().length());
            
        }
    }
}

I am open for suggestions, but the most important problem, how can I make the arrow buttons look as rectangles and the TextField show only one line.

I understand the setSize doesn’t work as I am using LayoutManagers. Anyway I can’t use it as I don’t know what the size of other components will be.

The arrow buttons are squares and they look ugly.

I know it is a bad pracite to use relative position. I am out of ideas.
I tried to use the GridBagLayout but the constructor doesn’t specify the number of columns and rows anymore, so the tutorials are outdated and if I try it anyway the interface doesn’t look nice anyway.
I also see that the buttons don’t have a preferredSize if you don’t call pack, but I think it would be more complicated to call pack and then just resize all the components again.